:root {
  /* typography compliance tokens from DESIGN.md: Monoo Mono** only genome-coordinate captions */
  --warm-petal: #FFF1DE;
  --sunset-coral: #FF7A59;
  --apricot-glow: #FFC15E;
  --raspberry-shadow: #C94C72;
  --soft-violet: #6D5A99;
  --deep-plum: #24182E;
  --mint-signal: #8FE3C2;
  --cream-highlight: #FFF8EC;
  --display: "Fraunces", serif;
  --body: "Alegreya Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--warm-petal);
}

body {
  margin: 0;
  color: var(--deep-plum);
  font-family: var(--body);
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 193, 94, 0.34), transparent 28rem),
    radial-gradient(circle at 14% 38%, rgba(201, 76, 114, 0.12), transparent 23rem),
    linear-gradient(180deg, var(--warm-petal) 0%, var(--cream-highlight) 45%, var(--warm-petal) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(109, 90, 153, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 90, 153, 0.055) 1px, transparent 1px);
  background-size: 11vw 11vw;
  mask-image: radial-gradient(circle at center, transparent 0, black 34%, transparent 82%);
}

.ambient, .ambient span {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.ambient { inset: 0; overflow: hidden; }

.wash {
  width: 42vw;
  height: 42vw;
  border-radius: 48% 52% 45% 55%;
  filter: blur(42px);
  opacity: 0.34;
  mix-blend-mode: multiply;
  animation: pigmentDrift 18s ease-in-out infinite alternate;
}

.wash-coral { right: -10vw; top: 6vh; background: radial-gradient(circle, #FF7A59, rgba(255, 193, 94, 0.32), transparent 68%); }
.wash-violet { left: -16vw; top: 118vh; background: radial-gradient(circle, rgba(109, 90, 153, 0.72), rgba(201, 76, 114, 0.24), transparent 66%); animation-delay: -5s; }
.wash-mint { right: 8vw; top: 330vh; background: radial-gradient(circle, rgba(143, 227, 194, 0.88), transparent 62%); animation-delay: -9s; }

main { position: relative; z-index: 1; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(9vh, auto));
  padding: clamp(1.4rem, 3vw, 4rem);
  isolation: isolate;
  overflow: hidden;
}

.chapter::after {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: -1;
  opacity: 0.24;
  background: radial-gradient(ellipse at 48% 50%, rgba(255, 248, 236, 0.76), transparent 62%);
}

.domain-mark,
.kicker,
.micro-note,
.field-bracket,
.closing-mark,
.watercolor-card,
.watermark-sequence,
.sequence,
.nav-bead::after,
.cursor-readout {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 650;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

h1 {
  grid-column: 2 / 6;
  grid-row: 5 / 7;
  font-size: clamp(4rem, 9vw, 10.8rem);
  max-width: 9ch;
}

h2 { font-size: clamp(3.1rem, 7vw, 8.8rem); max-width: 8.5ch; }

p { font-size: clamp(1.1rem, 1.5vw, 1.55rem); line-height: 1.32; margin: 0; }

.domain-mark {
  grid-column: 1 / 3;
  grid-row: 1;
  font-size: 0.76rem;
  color: var(--soft-violet);
}

.poem-line {
  grid-column: 7 / 10;
  grid-row: 7;
  align-self: end;
  color: var(--raspberry-shadow);
  font-size: clamp(1.3rem, 2vw, 2.2rem);
}

.text-island {
  position: relative;
  z-index: 4;
}

.text-island p:not(.kicker) { max-width: 24rem; margin-top: 1.1rem; color: rgba(36, 24, 46, 0.78); }

.kicker {
  color: var(--soft-violet);
  font-size: 0.74rem;
  margin-bottom: 1rem;
}

.left-low { grid-column: 2 / 5; grid-row: 5 / 8; }
.right-mid { grid-column: 7 / 10; grid-row: 3 / 6; }
.top-left { grid-column: 2 / 5; grid-row: 2 / 5; }
.lower-right { grid-column: 7 / 10; grid-row: 5 / 8; }
.final-copy { grid-column: 2 / 6; grid-row: 3 / 7; }

.bead-nav {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.nav-bead {
  position: relative;
  display: block;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, var(--cream-highlight), var(--apricot-glow) 38%, var(--sunset-coral) 78%);
  box-shadow: inset -0.1rem -0.12rem 0.18rem rgba(201, 76, 114, 0.38), 0 0.5rem 1.2rem rgba(201, 76, 114, 0.28);
  transition: transform 260ms ease, filter 260ms ease;
}

.nav-bead.active { transform: scale(1.55); filter: saturate(1.18); }
.nav-bead::after {
  content: attr(data-label);
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right;
  color: var(--soft-violet);
  font-size: 0.62rem;
  opacity: 0;
  transition: 220ms ease;
}
.nav-bead:hover::after { opacity: 1; transform: translateY(-50%) scaleX(1); }

.specimen, .repeat-strand, .cap-loop, .lonely-strand, .garden, .circuit-vine {
  opacity: 0;
  transform: translate3d(0, 3rem, 0) scale(0.9);
}

.is-visible .specimen,
.is-visible .repeat-strand,
.is-visible .cap-loop,
.is-visible .lonely-strand,
.is-visible .garden,
.is-visible .circuit-vine {
  animation: bounceEnter 1050ms cubic-bezier(.2, 1.6, .35, 1) forwards, bob 6s ease-in-out 1200ms infinite;
}

.moon-cap {
  grid-column: 6 / 11;
  grid-row: 1 / 6;
  align-self: center;
  justify-self: center;
  width: clamp(20rem, 46vw, 45rem);
  height: clamp(20rem, 46vw, 45rem);
  position: relative;
}

.halo {
  position: absolute;
  inset: 4%;
  border-radius: 52% 48% 55% 45%;
  background: radial-gradient(circle at 46% 50%, rgba(255, 193, 94, 0.5), rgba(255, 122, 89, 0.22) 42%, rgba(255, 241, 222, 0) 70%);
  filter: blur(10px);
  animation: bloom 9s ease-in-out infinite alternate;
}

.strand {
  position: absolute;
  width: 76%;
  height: 1.05rem;
  right: 44%;
  top: 50%;
  border-radius: 99px;
  transform: rotate(-18deg);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(109, 90, 153, 0.36), var(--sunset-coral));
  box-shadow: 0 1rem 2rem rgba(201, 76, 114, 0.16);
}

.cap-large {
  position: absolute;
  inset: 19%;
  border-radius: 48% 52% 50% 45% / 58% 44% 56% 42%;
  background:
    radial-gradient(circle at 28% 22%, var(--cream-highlight) 0 12%, rgba(255, 248, 236, 0.64) 13% 24%, transparent 25%),
    radial-gradient(circle at 62% 70%, rgba(109, 90, 153, 0.72), transparent 30%),
    linear-gradient(135deg, var(--apricot-glow), var(--sunset-coral) 48%, var(--raspberry-shadow));
  box-shadow:
    inset -2.2rem -2rem 3.8rem rgba(109, 90, 153, 0.36),
    inset 1.6rem 1.4rem 2rem rgba(255, 248, 236, 0.7),
    0 2.2rem 4.8rem rgba(201, 76, 114, 0.31),
    0 0 7rem rgba(255, 193, 94, 0.42);
}

.core, .shine, .dimple { position: absolute; border-radius: 999px; display: block; }
.core { width: 21%; height: 21%; right: 27%; bottom: 26%; background: radial-gradient(circle, var(--mint-signal), rgba(143, 227, 194, 0)); filter: blur(1px); }
.shine { width: 34%; height: 15%; left: 18%; top: 22%; background: rgba(255, 248, 236, 0.63); transform: rotate(-22deg); filter: blur(8px); }
.dimple { width: 13%; height: 10%; right: 22%; top: 28%; background: rgba(36, 24, 46, 0.16); filter: blur(5px); }

.sequence {
  position: absolute;
  left: 45%;
  top: 50%;
  color: var(--deep-plum);
  font-size: 0.74rem;
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease;
}
.tug-object:hover .sequence { opacity: 0.72; transform: translateY(-1.1rem); }

.micro-note {
  position: absolute;
  color: var(--soft-violet);
  font-size: 0.68rem;
  opacity: 0.74;
}
.note-origin { right: 13vw; bottom: 11vh; transform: rotate(1.5deg); }
.note-repeat { right: 13vw; top: 22vh; transform: rotate(-1deg); }
.note-signal { right: 15vw; bottom: 16vh; transform: rotate(1.2deg); }

.field-bracket {
  position: absolute;
  color: var(--raspberry-shadow);
  font-size: 0.67rem;
  padding-left: 2.8rem;
}
.field-bracket::before { content: ""; position: absolute; left: 0; top: 50%; width: 2.1rem; border-top: 1px dashed currentColor; }
.bracket-one { left: 9vw; top: 30vh; transform: rotate(-2deg); }
.bracket-two { left: 17vw; bottom: 16vh; transform: rotate(2deg); }

.repeat-strand {
  grid-column: 4 / 10;
  grid-row: 2 / 7;
  position: relative;
  min-height: 28rem;
}

.thread, .long-line {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(109, 90, 153, 0), rgba(109, 90, 153, 0.38), rgba(255, 122, 89, 0.75), rgba(109, 90, 153, 0));
  box-shadow: 0 1.3rem 2.8rem rgba(109, 90, 153, 0.12);
}
.thread { left: 3%; right: 6%; top: 51%; height: 0.72rem; transform: rotate(10deg); }

.bead {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(4.1rem, 8vw, 8rem);
  height: clamp(4.1rem, 8vw, 8rem);
  border-radius: 45% 55% 51% 49%;
  font-family: var(--mono);
  color: rgba(36, 24, 46, 0.48);
  background: radial-gradient(circle at 32% 25%, var(--cream-highlight), var(--apricot-glow) 34%, var(--sunset-coral) 72%, var(--raspberry-shadow));
  box-shadow: inset -0.8rem -0.8rem 1.2rem rgba(109, 90, 153, 0.26), inset 0.5rem 0.5rem 1rem rgba(255, 248, 236, 0.72), 0 1.5rem 3rem rgba(201, 76, 114, 0.24);
  animation: beadWiggle 4.5s ease-in-out infinite;
}
.b1 { left: 4%; top: 37%; animation-delay: -0.1s; }
.b2 { left: 18%; top: 42%; animation-delay: -0.4s; }
.b3 { left: 33%; top: 35%; animation-delay: -0.8s; }
.b4 { left: 49%; top: 44%; animation-delay: -1.2s; }
.b5 { left: 64%; top: 36%; animation-delay: -1.6s; }
.b6 { left: 78%; top: 43%; animation-delay: -2s; }

.watermark-sequence {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  max-width: 70vw;
  color: rgba(109, 90, 153, 0.12);
  font-size: clamp(1.4rem, 4.4vw, 5rem);
  white-space: nowrap;
}

.cap-loop {
  grid-column: 2 / 7;
  grid-row: 2 / 8;
  position: relative;
  align-self: center;
  justify-self: center;
  width: clamp(22rem, 45vw, 42rem);
  height: clamp(22rem, 45vw, 42rem);
}
.loop-shadow, .loop-body, .loop-highlight, .mint-core { position: absolute; border-radius: 50%; }
.loop-shadow { inset: 15%; background: radial-gradient(circle, rgba(109, 90, 153, 0.34), transparent 67%); filter: blur(18px); transform: translate(5%, 9%); }
.loop-body {
  inset: 12%;
  border: clamp(3.2rem, 7vw, 6rem) solid transparent;
  background: linear-gradient(142deg, var(--apricot-glow), var(--sunset-coral), var(--raspberry-shadow)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: inset 1.6rem 1.4rem 2rem rgba(255, 248, 236, 0.7), 0 2rem 5rem rgba(201, 76, 114, 0.28);
}
.loop-highlight { left: 28%; top: 20%; width: 30%; height: 11%; background: rgba(255, 248, 236, 0.6); filter: blur(8px); transform: rotate(-31deg); }
.mint-core { right: 25%; bottom: 28%; width: 13%; height: 13%; background: radial-gradient(circle, var(--mint-signal), transparent 70%); filter: blur(2px); }

.circuit-vine {
  grid-column: 3 / 10;
  grid-row: 3 / 8;
  width: 100%;
  align-self: center;
  overflow: visible;
}
.vine-shadow, .vine-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vine-shadow { stroke: rgba(201, 76, 114, 0.14); stroke-width: 28; filter: blur(13px); }
.vine-line { stroke: url(#pulseGradient); stroke-width: 8; stroke-dasharray: 16 20; animation: signalDash 9s linear infinite; }
.pulse { opacity: 0.62; animation: pulseGlow 3.2s ease-in-out infinite; }
.p2 { animation-delay: -1s; }
.p3 { animation-delay: -2.1s; }
.node ellipse { fill: url(#pulseGradient); stroke: rgba(201, 76, 114, 0.28); stroke-width: 3; }
.node circle { fill: var(--mint-signal); opacity: 0.8; }

.lonely-strand {
  grid-column: 1 / 8;
  grid-row: 2 / 7;
  position: relative;
}
.long-line { left: -12%; right: 6%; top: 48%; height: 0.9rem; transform: rotate(-11deg); }
.terminal {
  position: absolute;
  width: clamp(7rem, 13vw, 13rem);
  height: clamp(5rem, 9vw, 9rem);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, var(--cream-highlight), var(--apricot-glow), var(--sunset-coral) 62%, var(--raspberry-shadow));
  box-shadow: inset -1rem -1.2rem 1.7rem rgba(109, 90, 153, 0.28), 0 2rem 4rem rgba(201, 76, 114, 0.22);
}
.terminal-a { left: 5%; top: 36%; transform: rotate(-11deg); }
.terminal-b { right: 0; top: 47%; transform: rotate(-11deg) scale(0.72); opacity: 0.82; }

.watercolor-card {
  position: absolute;
  left: 9vw;
  bottom: 13vh;
  color: var(--soft-violet);
  font-size: 0.68rem;
  padding: 2.8rem 3.4rem;
  background: radial-gradient(circle at 50% 50%, rgba(255, 193, 94, 0.23), rgba(255, 122, 89, 0.13), transparent 73%);
  transform: rotate(-3deg);
}

.garden {
  grid-column: 5 / 11;
  grid-row: 2 / 8;
  position: relative;
}
.garden::before {
  content: "";
  position: absolute;
  inset: 4% 0 0 5%;
  background: radial-gradient(ellipse at 58% 52%, rgba(143, 227, 194, 0.18), rgba(255, 193, 94, 0.18), transparent 70%);
  filter: blur(20px);
}
.garden-bead {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 22%, var(--cream-highlight), var(--apricot-glow) 36%, var(--sunset-coral) 72%, var(--raspberry-shadow));
  box-shadow: inset -0.7rem -0.8rem 1.1rem rgba(109, 90, 153, 0.22), 0 1.4rem 3rem rgba(201, 76, 114, 0.18);
  animation: beadWiggle 5.4s ease-in-out infinite;
}
.g1 { width: 13rem; height: 8rem; left: 8%; top: 55%; }
.g2 { width: 9rem; height: 6rem; left: 28%; top: 40%; animation-delay: -0.8s; }
.g3 { width: 6rem; height: 4rem; left: 48%; top: 32%; opacity: 0.78; animation-delay: -1.3s; }
.g4 { width: 4rem; height: 2.8rem; left: 62%; top: 26%; opacity: 0.52; animation-delay: -1.8s; }
.g5 { width: 7rem; height: 5rem; left: 55%; top: 61%; animation-delay: -2.2s; }
.g6 { width: 3rem; height: 2.2rem; left: 73%; top: 44%; opacity: 0.44; animation-delay: -2.6s; }
.g7 { width: 2rem; height: 1.4rem; left: 84%; top: 36%; opacity: 0.3; animation-delay: -3s; }

.closing-mark {
  position: absolute;
  left: 10vw;
  bottom: 8vh;
  color: var(--soft-violet);
  font-size: 0.7rem;
}

.cursor-readout {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  transform: translate(-50%, -160%) scale(0.92);
  color: var(--deep-plum);
  background: rgba(255, 248, 236, 0.82);
  border: 1px solid rgba(109, 90, 153, 0.16);
  border-radius: 999px;
  padding: 0.45rem 0.65rem;
  font-size: 0.62rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1rem 2rem rgba(201, 76, 114, 0.13);
  transition: opacity 180ms ease;
}
.cursor-readout.show { opacity: 1; }

@keyframes bounceEnter {
  0% { opacity: 0; transform: translate3d(0, 4.6rem, 0) scale(0.78, 1.08); }
  54% { opacity: 1; transform: translate3d(0, -0.9rem, 0) scale(1.07, 0.94); }
  76% { transform: translate3d(0, 0.35rem, 0) scale(0.98, 1.03); }
  100% { opacity: 1; transform: translate3d(var(--tug-x, 0), var(--tug-y, 0), 0) scale(1); }
}

@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.1rem; }
}

@keyframes pigmentDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(3vw, 4vh, 0) rotate(12deg) scale(1.08); }
}

@keyframes bloom {
  from { transform: scale(0.95); opacity: 0.58; }
  to { transform: scale(1.08); opacity: 0.86; }
}

@keyframes beadWiggle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-0.75rem) rotate(3deg); }
}

@keyframes signalDash { to { stroke-dashoffset: -144; } }

@keyframes pulseGlow {
  0%, 100% { transform: scale(0.8); opacity: 0.35; }
  50% { transform: scale(1.18); opacity: 0.78; }
}

@media (max-width: 760px) {
  .chapter { display: block; padding: 1.2rem; min-height: 108vh; }
  h1, h2 { font-size: clamp(3.7rem, 18vw, 6.6rem); max-width: 8ch; }
  .text-island { margin-top: 18vh; }
  .moon-cap, .repeat-strand, .cap-loop, .lonely-strand, .garden, .circuit-vine { width: 100%; min-height: 22rem; margin-top: 12vh; }
  .moon-cap { height: 24rem; }
  .cap-loop { height: 25rem; }
  .poem-line { margin-top: 2rem; max-width: 12rem; }
  .bead-nav { right: 0.7rem; }
  .field-bracket, .micro-note, .watermark-sequence { display: none; }
  .final-copy { padding-top: 8vh; }
}