:root {
  /* Compliance note: IBM Plex Mono** only for short coordinates. */
  --bog-black: #07110B;
  --wet-moss: #1F3B24;
  --fern-glass: #3F6F3C;
  --glow-lichen: #B7F25C;
  --foxfire-cyan: #54E6B6;
  --old-page: #E2D3A4;
  --mushroom-umber: #8B5A2B;
  --bruised-violet: #342247;
  --rounded: "M PLUS Rounded 1c", "Nunito Sans", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --ui: "Nunito Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--bog-black);
  color: var(--old-page);
  font-family: var(--ui);
}

button { font: inherit; }

.site-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 62%, rgba(63, 111, 60, .38), transparent 33%),
    radial-gradient(circle at 80% 16%, rgba(84, 230, 182, .12), transparent 22%),
    radial-gradient(circle at 16% 74%, rgba(139, 90, 43, .24), transparent 24%),
    linear-gradient(145deg, #07110B 0%, #102012 43%, #342247 160%);
  isolation: isolate;
}

.site-shell::before {
  content: "";
  position: absolute;
  inset: -12%;
  background-image:
    radial-gradient(circle, rgba(226, 211, 164, .11) 0 1px, transparent 1.5px),
    linear-gradient(75deg, transparent 0 46%, rgba(63, 111, 60, .18) 47% 48%, transparent 50% 100%);
  background-size: 34px 34px, 150px 180px;
  opacity: .35;
  filter: blur(.2px);
  transform: rotate(-4deg);
  z-index: 0;
}

.site-shell::after,
.moss-vignette {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.site-shell::after {
  background: radial-gradient(ellipse at center, transparent 38%, rgba(7, 17, 11, .58) 74%, #07110B 100%);
}

.moss-vignette {
  background:
    radial-gradient(ellipse at 8% 100%, rgba(31, 59, 36, .96), transparent 34%),
    radial-gradient(ellipse at 100% 4%, rgba(31, 59, 36, .82), transparent 30%),
    linear-gradient(90deg, rgba(7, 17, 11, .92), transparent 14%, transparent 86%, rgba(7, 17, 11, .86));
  mix-blend-mode: multiply;
}

.spore-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.spore {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--glow-lichen);
  box-shadow: 0 0 16px var(--glow-lichen), 0 0 32px rgba(84, 230, 182, .55);
  opacity: .2;
  animation: blinkSpore var(--dur) infinite ease-in-out alternate;
}

.spore.hot { opacity: .95; transform: scale(1.8); }

.moth-shadow {
  position: absolute;
  width: 34px;
  height: 22px;
  border-radius: 50% 8px 50% 8px;
  background: rgba(84, 230, 182, .18);
  box-shadow: 0 0 24px rgba(84, 230, 182, .45);
  transform: translate(-50%, -50%) rotate(22deg);
  z-index: 12;
  pointer-events: none;
  transition: width .2s ease, height .2s ease;
}

.hud-gutter {
  position: absolute;
  top: 8vh;
  bottom: 8vh;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  writing-mode: vertical-rl;
  color: rgba(226, 211, 164, .67);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hud-gutter-left { left: 1.6rem; }
.hud-gutter-right { right: 1.6rem; transform: rotate(180deg); }

.persistent-hud {
  position: absolute;
  inset: 4.2vh 4.2vw;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(226, 211, 164, .18);
  border-radius: 32px;
  box-shadow: inset 0 0 90px rgba(84, 230, 182, .06);
}

.crop {
  position: absolute;
  width: 54px;
  height: 54px;
  border-color: rgba(226, 211, 164, .55);
  filter: drop-shadow(0 0 10px rgba(183, 242, 92, .28));
}

.crop-a { left: 22px; top: 22px; border-top: 2px solid; border-left: 2px solid; }
.crop-b { right: 22px; top: 22px; border-top: 2px solid; border-right: 2px solid; }
.crop-c { left: 22px; bottom: 22px; border-bottom: 2px solid; border-left: 2px solid; }
.crop-d { right: 22px; bottom: 22px; border-bottom: 2px solid; border-right: 2px solid; }

.hud-orbit,
.moon-ticks {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hud-orbit {
  border: 1px solid rgba(183, 242, 92, .18);
  box-shadow: 0 0 22px rgba(84, 230, 182, .08);
}

.orbit-one { width: min(62vw, 650px); height: min(62vw, 650px); animation: rotateSlow 28s linear infinite; border-style: dashed; }
.orbit-two { width: min(44vw, 470px); height: min(44vw, 470px); animation: rotateSlow 19s linear infinite reverse; border-color: rgba(226, 211, 164, .18); }
.orbit-three { width: min(76vw, 790px); height: min(38vw, 430px); animation: floatOval 9s ease-in-out infinite; }

.moon-ticks {
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  background: conic-gradient(from 8deg, rgba(226, 211, 164, .46) 0 1deg, transparent 1deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64% 65%, transparent 66%);
  mask: radial-gradient(circle, transparent 63%, #000 64% 65%, transparent 66%);
  opacity: .34;
  animation: rotateSlow 46s linear infinite;
}

.root-nav {
  position: absolute;
  left: 50%;
  bottom: 5.2vh;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  align-items: end;
  gap: 1rem;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(226, 211, 164, .24);
  border-radius: 999px;
  background: rgba(31, 59, 36, .43);
  box-shadow: 0 12px 50px rgba(7, 17, 11, .55), inset 0 0 24px rgba(84, 230, 182, .06);
  backdrop-filter: blur(12px);
}

.root-dot {
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3F6F3C;
  color: var(--old-page);
  box-shadow: 0 0 0 4px rgba(63, 111, 60, .24), 0 0 12px rgba(84, 230, 182, .28);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.root-dot span {
  position: absolute;
  left: 50%;
  bottom: 1.3rem;
  transform: translateX(-50%) rotate(-4deg);
  opacity: 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .2s ease, bottom .2s ease;
}

.root-dot:hover span,
.root-dot.active span { opacity: 1; bottom: 1.75rem; }
.root-dot.active { background: var(--glow-lichen); transform: scale(1.25); box-shadow: 0 0 0 7px rgba(183, 242, 92, .15), 0 0 30px rgba(183, 242, 92, .85); }

.chamber {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 8vh 9vw;
  opacity: 0;
  transform: scale(1.04) translateY(26px);
  pointer-events: none;
  transition: opacity .72s ease, transform .82s cubic-bezier(.18, .86, .28, 1);
}

.chamber.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.artifact {
  position: relative;
  width: min(64vw, 700px);
  height: min(64vw, 560px);
  display: grid;
  place-items: center;
}

.wordmark-artifact h1 {
  position: relative;
  margin: 0;
  z-index: 3;
  font-family: var(--rounded);
  font-size: clamp(3.8rem, 11vw, 9.5rem);
  line-height: .86;
  font-weight: 900;
  letter-spacing: -.08em;
  color: var(--old-page);
  text-shadow: 0 9px 0 rgba(31, 59, 36, .74), 0 0 18px rgba(183, 242, 92, .24), 0 0 54px rgba(84, 230, 182, .18);
}

.wordmark-artifact h1::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -.1em;
  height: .38em;
  background: linear-gradient(180deg, transparent, rgba(31, 59, 36, .94) 42%, #07110B 100%);
}

.buried-line {
  position: absolute;
  top: 63%;
  max-width: 430px;
  text-align: center;
  color: rgba(226, 211, 164, .78);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-style: italic;
  z-index: 4;
}

.vellum-ring {
  position: absolute;
  border-radius: 50%;
  border: 12px solid transparent;
  z-index: 2;
}

.ring-slow {
  width: min(62vw, 620px);
  height: min(62vw, 620px);
  border-top-color: rgba(226, 211, 164, .55);
  border-right-color: rgba(183, 242, 92, .38);
  border-bottom-color: rgba(226, 211, 164, .19);
  filter: drop-shadow(0 0 22px rgba(183, 242, 92, .36));
  animation: rotateSlow 18s linear infinite;
}

.ring-broken {
  width: min(49vw, 500px);
  height: min(49vw, 500px);
  border-left-color: rgba(84, 230, 182, .42);
  border-bottom-color: rgba(226, 211, 164, .43);
  border-style: dashed;
  animation: rotateSlow 13s linear infinite reverse;
}

.root-trace {
  position: absolute;
  width: 74%;
  height: 26%;
  border-bottom: 3px solid rgba(183, 242, 92, .62);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(183, 242, 92, .65));
}

.trace-one { top: 58%; transform: rotate(9deg); }
.trace-two { top: 45%; width: 52%; transform: rotate(-15deg); border-color: rgba(84, 230, 182, .55); }

.field-label,
.index-tab,
.margin-note {
  position: absolute;
  z-index: 11;
  padding: .52rem .72rem;
  border: 1px solid rgba(226, 211, 164, .36);
  border-radius: 18px 18px 18px 4px;
  background: rgba(226, 211, 164, .11);
  color: var(--old-page);
  box-shadow: 0 0 18px rgba(84, 230, 182, .1), inset 0 0 16px rgba(31, 59, 36, .58);
  backdrop-filter: blur(10px);
  font-family: var(--rounded);
  font-size: clamp(.78rem, 1vw, .95rem);
  font-weight: 800;
}

.chamber.active .field-label,
.chamber.active .index-tab,
.chamber.active .margin-note,
.chamber.active .daemon-sprite,
.chamber.active .book-node,
.chamber.active .rune-marker {
  animation: bounceEnter .85s cubic-bezier(.22, 1.35, .32, 1) both;
}

.label-one { left: 15vw; top: 25vh; animation-delay: .1s; }
.label-two { right: 13vw; top: 31vh; animation-delay: .24s; }
.label-three { left: 23vw; bottom: 22vh; animation-delay: .38s; }

.specimen-note {
  position: absolute;
  right: 8vw;
  bottom: 15vh;
  z-index: 9;
  max-width: 310px;
  padding: 1.2rem;
  border-left: 2px solid var(--glow-lichen);
  color: rgba(226, 211, 164, .78);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  background: linear-gradient(90deg, rgba(31, 59, 36, .58), transparent);
}

.chamber-copy {
  position: absolute;
  right: 10vw;
  top: 18vh;
  z-index: 10;
  max-width: 390px;
  padding: 1.5rem 1.7rem;
  border: 1px solid rgba(226, 211, 164, .24);
  border-radius: 30px 8px 30px 30px;
  background: rgba(31, 59, 36, .58);
  box-shadow: 0 24px 80px rgba(7, 17, 11, .52), inset 0 0 40px rgba(84, 230, 182, .06);
  backdrop-filter: blur(16px);
}

.left-copy { left: 10vw; right: auto; top: 16vh; }
.dawn-copy { top: 15vh; }

.kicker {
  margin: 0 0 .7rem;
  color: var(--glow-lichen);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.chamber-copy h2 {
  margin: 0 0 .9rem;
  color: var(--old-page);
  font-family: var(--rounded);
  font-size: clamp(2rem, 4.8vw, 4.8rem);
  line-height: .9;
  letter-spacing: -.05em;
  text-shadow: 0 0 20px rgba(183, 242, 92, .18);
}

.chamber-copy p:last-child {
  margin: 0;
  color: rgba(226, 211, 164, .83);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.55;
}

.mushroom-core { transform: translateX(-10vw); }
.cap-glow {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 242, 92, .46), rgba(84, 230, 182, .15) 42%, transparent 68%);
  animation: pulseGlow 2.7s ease-in-out infinite;
}

.mushroom-cap {
  position: relative;
  width: min(42vw, 380px);
  height: min(23vw, 205px);
  border-radius: 52% 48% 42% 44% / 76% 77% 28% 26%;
  background: radial-gradient(circle at 50% 24%, #B7F25C, #54E6B6 28%, #3F6F3C 54%, #8B5A2B 100%);
  box-shadow: 0 0 42px rgba(183, 242, 92, .72), inset 0 -24px 35px rgba(7, 17, 11, .46);
  z-index: 2;
}

.mushroom-cap span {
  position: absolute;
  top: 42%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--old-page);
  box-shadow: 0 0 14px var(--old-page);
}
.mushroom-cap span:nth-child(1) { left: 26%; }
.mushroom-cap span:nth-child(2) { left: 50%; top: 28%; }
.mushroom-cap span:nth-child(3) { right: 22%; top: 52%; }

.mushroom-stem {
  position: absolute;
  top: 54%;
  width: 96px;
  height: 210px;
  border-radius: 42% 45% 28% 30%;
  background: linear-gradient(90deg, #8B5A2B, #E2D3A4 48%, #3F6F3C);
  box-shadow: inset -18px 0 30px rgba(7, 17, 11, .42);
}

.tab-a { left: 9%; top: 26%; animation-delay: .12s; }
.tab-b { right: 5%; top: 42%; animation-delay: .28s; }
.tab-c { left: 20%; bottom: 20%; animation-delay: .44s; }

.protocol-map { width: min(70vw, 760px); height: min(52vw, 520px); }
.root-svg { position: absolute; inset: 4% 2%; width: 96%; height: 88%; overflow: visible; }
.root-line { fill: none; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(183, 242, 92, .58)); stroke-dasharray: 13 13; animation: rootFlow 2.6s linear infinite; }
.root-a { stroke: #B7F25C; }
.root-b { stroke: #54E6B6; animation-duration: 3.3s; }
.root-c { stroke: #3F6F3C; animation-duration: 4.1s; }

.book-node,
.beetle-node,
.rune-marker {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
}

.book-node {
  width: 86px;
  height: 116px;
  border-radius: 8px 18px 18px 8px;
  background: linear-gradient(90deg, #8B5A2B 0 22%, #E2D3A4 23% 100%);
  color: #342247;
  font-family: var(--serif);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 15px 40px rgba(7, 17, 11, .5), 0 0 18px rgba(183, 242, 92, .2);
}
.node-a { left: 8%; bottom: 17%; animation-delay: .12s; }
.node-b { right: 13%; top: 12%; animation-delay: .24s; }
.beetle-node { right: 20%; bottom: 22%; color: var(--glow-lichen); font-size: 3rem; text-shadow: 0 0 18px var(--glow-lichen); animation-delay: .36s; }
.rune-marker { width: 42px; height: 42px; border: 1px solid rgba(84, 230, 182, .5); border-radius: 50%; color: var(--foxfire-cyan); font-size: 1.4rem; box-shadow: 0 0 20px rgba(84, 230, 182, .26); }
.marker-a { left: 35%; top: 18%; animation-delay: .18s; }
.marker-b { left: 48%; bottom: 24%; animation-delay: .3s; }
.marker-c { right: 34%; top: 44%; animation-delay: .42s; }

.daemon-board {
  width: min(62vw, 680px);
  height: min(50vw, 520px);
  transform: rotate(-2deg) translateX(-8vw);
}
.paper-stain {
  position: absolute;
  inset: 9% 12%;
  border-radius: 40% 58% 47% 53%;
  background: radial-gradient(circle at 40% 44%, rgba(226, 211, 164, .18), rgba(139, 90, 43, .12) 45%, transparent 72%);
  border: 1px solid rgba(226, 211, 164, .18);
}
.daemon-sprite { position: absolute; color: var(--glow-lichen); font-size: 2.4rem; text-shadow: 0 0 20px var(--glow-lichen); z-index: 5; }
.sprite-a { left: 18%; top: 22%; animation-delay: .1s; }
.sprite-b { right: 19%; top: 29%; animation-delay: .22s; }
.sprite-c { left: 46%; bottom: 17%; animation-delay: .34s; }
.note-a { left: 5%; top: 36%; max-width: 230px; animation-delay: .16s; }
.note-b { right: 10%; top: 12%; animation-delay: .28s; }
.note-c { right: 3%; bottom: 29%; animation-delay: .4s; }
.note-d { left: 29%; bottom: 8%; animation-delay: .52s; }

.dawn {
  background: radial-gradient(circle at 50% 52%, rgba(183, 242, 92, .16), transparent 42%), linear-gradient(180deg, transparent 0%, rgba(63, 111, 60, .18) 100%);
}
.dawn-clearing { transform: translateX(-9vw); }
.dawn-halo {
  position: absolute;
  width: min(52vw, 540px);
  height: min(52vw, 540px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 211, 164, .34), rgba(183, 242, 92, .23) 36%, rgba(84, 230, 182, .1) 58%, transparent 74%);
  box-shadow: 0 0 100px rgba(183, 242, 92, .22);
}
.petal {
  position: absolute;
  width: 28px;
  height: 56px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #E2D3A4, #B7F25C);
  opacity: .75;
  animation: petalFloat 5s ease-in-out infinite;
}
.petal-a { left: 24%; top: 23%; }
.petal-b { right: 28%; top: 34%; animation-delay: .8s; }
.petal-c { left: 48%; bottom: 22%; animation-delay: 1.4s; }
.notebook {
  position: relative;
  z-index: 3;
  width: min(38vw, 360px);
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: .4rem;
  padding: 2rem;
  border-radius: 10px 30px 30px 10px;
  background: linear-gradient(90deg, #8B5A2B 0 12%, #E2D3A4 13% 100%);
  color: #342247;
  box-shadow: 0 26px 80px rgba(7, 17, 11, .62), 0 0 34px rgba(183, 242, 92, .35);
  cursor: pointer;
  transform: rotate(3deg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.notebook span { font-family: var(--rounded); font-size: clamp(1.6rem, 3vw, 2.9rem); font-weight: 900; line-height: .95; text-align: center; }
.notebook small { font-family: var(--serif); font-size: 1rem; font-style: italic; }
.notebook.open { transform: rotate(-1deg) scale(1.06); box-shadow: 0 30px 100px rgba(7, 17, 11, .72), 0 0 58px rgba(84, 230, 182, .74); }

@keyframes rotateSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes floatOval { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scaleX(1); } 50% { transform: translate(-50%, -51.5%) rotate(3deg) scaleX(1.04); } }
@keyframes blinkSpore { 0% { opacity: .12; transform: translateY(0) scale(.8); } 100% { opacity: .86; transform: translateY(-9px) scale(1.25); } }
@keyframes pulseGlow { 0%, 100% { transform: scale(.96); opacity: .68; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes bounceEnter { 0% { opacity: 0; transform: translateY(36px) scale(.72) rotate(-9deg); } 62% { opacity: 1; transform: translateY(-10px) scale(1.08) rotate(4deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes rootFlow { to { stroke-dashoffset: -52; } }
@keyframes petalFloat { 0%, 100% { transform: translateY(0) rotate(12deg); } 50% { transform: translateY(-28px) rotate(55deg); } }

@media (max-width: 760px) {
  .hud-gutter { display: none; }
  .persistent-hud { inset: 2vh 3vw; }
  .chamber { padding: 7vh 6vw 13vh; }
  .artifact { width: 92vw; height: 58vh; }
  .chamber-copy,
  .left-copy,
  .dawn-copy { left: 7vw; right: 7vw; top: auto; bottom: 14vh; max-width: none; padding: 1rem 1.1rem; }
  .chamber-copy h2 { font-size: 2rem; }
  .mushroom-core,
  .daemon-board,
  .dawn-clearing { transform: translateY(-8vh); }
  .root-nav { gap: .75rem; bottom: 3vh; }
  .specimen-note { left: 8vw; right: 8vw; bottom: 14vh; max-width: none; }
  .label-one { left: 7vw; top: 18vh; }
  .label-two { right: 7vw; top: 29vh; }
  .label-three { left: 12vw; bottom: 28vh; }
  .notebook { width: 70vw; }
}