:root {
  --black-violet-glass: #090514;
  --elderberry-shadow: #191036;
  --fairy-ultraviolet: #B44CFF;
  --acid-mint-nectar: #62FFB6;
  --candied-rose: #FF4FA3;
  --moon-sugar-cream: #F7F0D2;
  --electric-honey: #FFE45C;
  --display: "Libre Baskerville", Baskerville, Georgia, serif;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* DESIGN TERMS: specimen labels connected by thin neon circuit-vines. Use CSS clip-path polygons for hex cells. IBM Plex Mono** Mono* Monoo coordinates. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--moon-sugar-cream);
  font-family: var(--jp);
  background:
    radial-gradient(circle at 12% 10%, rgba(180, 76, 255, .28), transparent 30rem),
    radial-gradient(circle at 88% 24%, rgba(98, 255, 182, .16), transparent 28rem),
    radial-gradient(circle at 50% 105%, rgba(255, 79, 163, .16), transparent 34rem),
    linear-gradient(135deg, var(--black-violet-glass), #05030b 55%, var(--elderberry-shadow));
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(247, 240, 210, .08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(98, 255, 182, .07) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 19px 23px, 31px 29px, 7px 100%;
  mix-blend-mode: screen;
}

.cursor-glow {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  left: -9rem;
  top: -9rem;
  background: radial-gradient(circle, rgba(98,255,182,.16), rgba(180,76,255,.08) 38%, transparent 68%);
  pointer-events: none;
  z-index: 5;
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0);
}

.manuscript { position: relative; z-index: 10; }

.chamber {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

.gate {
  display: grid;
  place-items: center;
  background:
    linear-gradient(60deg, transparent 47%, rgba(98,255,182,.08) 48% 49%, transparent 50%),
    radial-gradient(circle at center, rgba(25,16,54,.8), transparent 34rem);
}

.aurora {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: conic-gradient(from 40deg, rgba(180,76,255,.28), rgba(98,255,182,.18), rgba(255,79,163,.22), rgba(255,228,92,.1), rgba(180,76,255,.28));
  filter: blur(34px);
  animation: slowSpin 24s linear infinite;
  opacity: .72;
}

.central-hex, .hex, .cell, .crumb {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.central-hex {
  position: relative;
  width: min(62vw, 30rem);
  aspect-ratio: 1.12;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 3rem;
  background:
    radial-gradient(circle at 52% 38%, rgba(255,228,92,.22), transparent 20%),
    radial-gradient(circle at 48% 62%, rgba(98,255,182,.2), transparent 28%),
    linear-gradient(145deg, rgba(25,16,54,.96), rgba(9,5,20,.9));
  border: 1px solid rgba(247,240,210,.18);
  box-shadow: 0 0 1.4rem rgba(98,255,182,.55), 0 0 5rem rgba(180,76,255,.42), inset 0 0 2rem rgba(255,79,163,.16);
  animation: pulseCell 4.6s ease-in-out infinite, arrive .9s cubic-bezier(.2,1.45,.36,1) both;
  z-index: 4;
}

.central-hex h1 {
  font-family: var(--display);
  font-size: clamp(2.65rem, 7vw, 6.8rem);
  letter-spacing: -.055em;
  line-height: .9;
  margin: .45rem 0 .7rem;
  text-shadow: 0 0 1rem rgba(255,228,92,.33), 0 0 2rem rgba(255,79,163,.22);
}

.jp { font-family: var(--jp); color: var(--moon-sugar-cream); letter-spacing: .08em; }
.central-hex .jp { margin: 0 0 .4rem; font-size: clamp(1rem, 2vw, 1.45rem); }
.central-hex i { font-family: var(--display); color: rgba(247,240,210,.76); }
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.central-hex .mono { color: var(--acid-mint-nectar); font-size: .72rem; }

.wake-cells { position: absolute; inset: 0; z-index: 2; }
.hex {
  position: absolute;
  width: clamp(5rem, 10vw, 9rem);
  aspect-ratio: 1.12;
  background: linear-gradient(145deg, rgba(180,76,255,.22), rgba(98,255,182,.1));
  border: 1px solid rgba(98,255,182,.34);
  box-shadow: inset 0 0 1.5rem rgba(247,240,210,.06), 0 0 1.4rem rgba(180,76,255,.26);
  animation: wakeCell .9s cubic-bezier(.22,1.7,.36,1) both, orbit 8s ease-in-out infinite;
}
.h1 { left: 18%; top: 24%; animation-delay: .12s, 1s; }
.h2 { right: 17%; top: 20%; animation-delay: .22s, 1.6s; }
.h3 { left: 26%; bottom: 18%; animation-delay: .32s, 2s; }
.h4 { right: 25%; bottom: 16%; animation-delay: .42s, 1.2s; }
.h5 { left: 8%; top: 52%; animation-delay: .52s, 2.3s; }
.h6 { right: 8%; top: 55%; animation-delay: .62s, 1.9s; }

.trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.trace-svg path {
  fill: none;
  stroke: var(--acid-mint-nectar);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(98,255,182,.8));
  stroke-dasharray: 10 12;
  animation: traceFlow 9s linear infinite;
  opacity: .64;
}
.trace-svg path:nth-child(2) { stroke: var(--candied-rose); animation-duration: 12s; opacity: .52; }
.trace-svg path:nth-child(3) { stroke: var(--electric-honey); animation-duration: 15s; opacity: .46; }

.margin-note, .spec-label {
  position: absolute;
  color: var(--acid-mint-nectar);
  font-size: clamp(.62rem, 1vw, .78rem);
  line-height: 1.55;
  padding: .7rem .85rem;
  background: rgba(9,5,20,.56);
  border: 1px solid rgba(98,255,182,.26);
  box-shadow: 0 0 1rem rgba(98,255,182,.12);
}
.note-a { left: 7%; top: 18%; }
.note-b { right: 6%; bottom: 18%; color: var(--electric-honey); border-color: rgba(255,228,92,.25); }

.story {
  display: grid;
  grid-template-columns: minmax(18rem, .9fr) minmax(24rem, 1.15fr);
  gap: 5vw;
  align-items: center;
  background:
    radial-gradient(circle at var(--sx, 70%) 45%, rgba(180,76,255,.17), transparent 30rem),
    linear-gradient(120deg, rgba(25,16,54,.42), transparent 55%);
}
.story.right { grid-template-columns: minmax(24rem, 1.15fr) minmax(18rem, .9fr); }
.story.right .chapter-copy { grid-column: 2; }
.story.right .honey-cluster { grid-column: 1; grid-row: 1; }

.chapter-copy {
  position: relative;
  z-index: 4;
  max-width: 34rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(25,16,54,.62), rgba(9,5,20,.28));
  border-left: 1px solid rgba(247,240,210,.2);
  box-shadow: -1rem 0 2rem rgba(9,5,20,.22);
}
.chapter-code { color: var(--acid-mint-nectar); font-size: .72rem; }
h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.05em;
  margin: .6rem 0 1rem;
  color: var(--moon-sugar-cream);
  text-shadow: 0 0 1.4rem rgba(180,76,255,.28);
}
.chapter-copy p {
  font-size: clamp(1.02rem, 1.45vw, 1.28rem);
  line-height: 1.8;
  color: rgba(247,240,210,.82);
}

.honey-cluster {
  position: relative;
  min-height: 34rem;
  z-index: 3;
  filter: drop-shadow(0 0 1.4rem rgba(180,76,255,.18));
}
.cell {
  position: absolute;
  width: clamp(8.2rem, 15vw, 14rem);
  aspect-ratio: 1.12;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(150deg, rgba(25,16,54,.94), rgba(9,5,20,.72));
  box-shadow: inset 0 0 1.8rem rgba(247,240,210,.06), 0 0 0 1px rgba(180,76,255,.55), 0 0 2.2rem rgba(180,76,255,.26);
  transition: transform .55s cubic-bezier(.2,1.65,.32,1), filter .35s ease, box-shadow .35s ease;
}
.cell:hover, .cell.is-active {
  transform: translate(var(--tx,0), var(--ty,0)) scale(1.12) rotate(var(--rot, 2deg));
  filter: saturate(1.35) brightness(1.12);
  box-shadow: inset 0 0 2rem rgba(255,228,92,.08), 0 0 0 1px var(--acid-mint-nectar), 0 0 3rem rgba(98,255,182,.36);
}
.near-active { transform: scale(.94); filter: saturate(1.15) brightness(1.04); }
.is-awake .chapter-copy { animation: arrive .8s cubic-bezier(.2,1.45,.36,1) both; }
.is-awake .honey-cluster { animation: arrive 1s cubic-bezier(.2,1.35,.36,1) both; }
.cell b { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 2rem); text-transform: lowercase; }
.cell small { display: block; font-family: var(--mono); color: rgba(247,240,210,.68); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .35rem; }
.large { width: clamp(11rem, 19vw, 18rem); }
.mint { box-shadow: inset 0 0 1.8rem rgba(98,255,182,.08), 0 0 0 1px rgba(98,255,182,.55), 0 0 2.1rem rgba(98,255,182,.18); }
.rose { box-shadow: inset 0 0 1.8rem rgba(255,79,163,.08), 0 0 0 1px rgba(255,79,163,.55), 0 0 2.1rem rgba(255,79,163,.22); }
.honey { box-shadow: inset 0 0 1.8rem rgba(255,228,92,.1), 0 0 0 1px rgba(255,228,92,.5), 0 0 2.1rem rgba(255,228,92,.18); }
.violet { box-shadow: inset 0 0 1.8rem rgba(180,76,255,.12), 0 0 0 1px rgba(180,76,255,.62), 0 0 2.1rem rgba(180,76,255,.22); }
.moss { background: radial-gradient(circle at 35% 30%, rgba(98,255,182,.28), transparent 28%), linear-gradient(150deg, rgba(25,16,54,.96), rgba(9,5,20,.78)); }
.star::before, .clover::before, .moss::before {
  content: "";
  position: absolute;
  width: 2.7rem;
  height: 2.7rem;
  top: 18%;
  right: 18%;
  background: radial-gradient(circle, var(--electric-honey) 0 18%, transparent 20% 100%);
  filter: drop-shadow(0 0 8px var(--electric-honey));
}
.clover::before { border-radius: 50% 50% 50% 0; background: var(--acid-mint-nectar); opacity: .55; transform: rotate(45deg); }
.moss::before { background: radial-gradient(circle, var(--acid-mint-nectar) 0 20%, transparent 21% 100%); opacity: .7; }

.cluster-one .cell:nth-child(1), .cluster-three .cell:nth-child(1) { left: 36%; top: 20%; }
.cluster-one .cell:nth-child(2), .cluster-three .cell:nth-child(2) { left: 18%; top: 6%; }
.cluster-one .cell:nth-child(3), .cluster-three .cell:nth-child(3) { left: 18%; top: 45%; }
.cluster-one .cell:nth-child(4), .cluster-three .cell:nth-child(4) { left: 55%; top: 48%; }
.cluster-one .cell:nth-child(5) { left: 58%; top: 4%; }
.cluster-two .cell:nth-child(1), .cluster-four .cell:nth-child(1) { left: 30%; top: 18%; }
.cluster-two .cell:nth-child(2), .cluster-four .cell:nth-child(2) { left: 8%; top: 30%; }
.cluster-two .cell:nth-child(3), .cluster-four .cell:nth-child(3) { left: 45%; top: 0; }
.cluster-two .cell:nth-child(4), .cluster-four .cell:nth-child(4) { left: 53%; top: 42%; }
.cluster-two .cell:nth-child(5), .cluster-four .cell:nth-child(5) { left: 18%; top: 59%; }

.spec-label { z-index: 4; color: var(--moon-sugar-cream); }
.l1 { right: 16%; top: 16%; }
.l2 { right: 9%; bottom: 18%; color: var(--candied-rose); border-color: rgba(255,79,163,.28); }
.l3 { left: 10%; top: 15%; color: var(--acid-mint-nectar); }
.l4 { left: 14%; bottom: 16%; color: var(--electric-honey); border-color: rgba(255,228,92,.28); }
.l5 { left: 50%; bottom: 10%; transform: translateX(-50%); color: var(--acid-mint-nectar); }

.finale {
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at center, rgba(255,228,92,.11), transparent 32rem), linear-gradient(180deg, transparent, rgba(180,76,255,.12));
}
.final-copy { max-width: 48rem; border: 1px solid rgba(247,240,210,.16); border-left-color: rgba(247,240,210,.16); }
.spoon-map { position: relative; width: min(88vw, 65rem); height: 25rem; z-index: 4; }
.crumb {
  position: absolute;
  width: clamp(3rem, 7vw, 5.5rem);
  aspect-ratio: 1.12;
  background: radial-gradient(circle, rgba(255,228,92,.32), transparent 45%), linear-gradient(145deg, rgba(25,16,54,.8), rgba(9,5,20,.88));
  box-shadow: 0 0 0 1px rgba(255,228,92,.55), 0 0 1.8rem rgba(255,228,92,.35);
  animation: crumbTwinkle 3s ease-in-out infinite;
}
.c1 { left: 7%; top: 52%; animation-delay: .1s; }.c2 { left: 19%; top: 41%; animation-delay: .3s; }.c3 { left: 31%; top: 35%; animation-delay: .5s; }.c4 { left: 44%; top: 31%; animation-delay: .7s; }.c5 { left: 57%; top: 25%; animation-delay: .9s; }.c6 { left: 68%; top: 22%; animation-delay: 1.1s; }.c7 { left: 78%; top: 27%; animation-delay: 1.3s; }.c8 { left: 84%; top: 39%; animation-delay: 1.5s; }.c9 { left: 67%; top: 49%; animation-delay: 1.7s; }

@keyframes pulseCell { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.2) saturate(1.2); } }
@keyframes arrive { from { opacity: 0; transform: scale(.64) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes wakeCell { from { opacity: 0; transform: scale(.2) translateY(3rem); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes orbit { 0%,100% { translate: 0 0; } 50% { translate: .6rem -1rem; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes traceFlow { to { stroke-dashoffset: -220; } }
@keyframes crumbTwinkle { 0%,100% { transform: translateY(0) scale(1); opacity: .72; } 50% { transform: translateY(-.8rem) scale(1.12); opacity: 1; } }

@media (max-width: 820px) {
  .chamber { padding: 4.5rem 1.25rem; }
  .story, .story.right { display: block; }
  .story.right .chapter-copy, .story.right .honey-cluster { grid-column: auto; grid-row: auto; }
  .honey-cluster { min-height: 30rem; margin-top: 2rem; transform: scale(.82); transform-origin: left top; }
  .margin-note, .spec-label { display: none; }
  .hex { opacity: .55; }
  .central-hex { width: 88vw; }
}