:root {
  /* IBM Plex Mono** only for tiny stream labels */
  --yellow: #F6D84A;
  --cream: #FFF4D8;
  --mist: #BFEAF2;
  --leaf: #A8D7A0;
  --apricot: #F3B59B;
  --ink: #263238;
  --cyan: #5EF4FF;
  --pink: #FF7BD5;
  --display: "Jost", "Futura", "Avenir Next", sans-serif;
  --body: "Nunito Sans", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --design-font-token: "Mono**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 12%, rgba(246, 216, 74, .35), transparent 28rem),
    radial-gradient(circle at 78% 8%, rgba(94, 244, 255, .22), transparent 26rem),
    linear-gradient(135deg, var(--cream), var(--mist));
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .28;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(38,50,56,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(38,50,56,.06) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 31px 37px, 43px 41px, 7px 100%;
  mix-blend-mode: multiply;
}

.cursor-ripple {
  position: fixed;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(94,244,255,.65);
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transform: translate3d(50vw, 50vh, 0) scale(.5);
  transition: opacity .35s ease;
}

body.pointer-active .cursor-ripple { opacity: .75; }

.stream-stage { position: relative; isolation: isolate; }

.global-stream {
  position: fixed;
  inset: 4vh -2vw auto -2vw;
  width: 104vw;
  height: 92vh;
  z-index: 2;
  pointer-events: none;
  opacity: .88;
}

.global-stream path { fill: none; stroke-linecap: round; }
.stream-shadow { stroke: rgba(191,234,242,.62); stroke-width: 62; filter: blur(10px); }
.stream-line { stroke: rgba(168,215,160,.38); stroke-width: 13; stroke-dasharray: 11 22; animation: streamDrift 14s linear infinite; }
.stream-spark { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 120 1050; filter: url(#cyanGlow); animation: sparkTravel 5.4s ease-in-out infinite; }

.petal-nav {
  position: fixed;
  top: 50%;
  right: clamp(14px, 3vw, 42px);
  transform: translateY(-50%) rotate(13deg);
  z-index: 25;
  display: grid;
  gap: 22px;
}

.nav-petal,
.petal-marker,
.begin-stream {
  font-family: var(--mono);
  color: var(--ink);
  cursor: pointer;
}

.nav-petal {
  width: 22px;
  height: 34px;
  border: 1px solid rgba(38,50,56,.22);
  border-radius: 90% 12% 90% 22%;
  background: linear-gradient(145deg, var(--yellow), #fff3a1);
  box-shadow: 0 0 0 rgba(94,244,255,0), 0 8px 18px rgba(38,50,56,.12);
  transform: rotate(30deg);
  transition: transform .45s ease, box-shadow .45s ease, background .45s ease;
}

.nav-petal::after {
  content: attr(data-label);
  position: absolute;
  right: 30px;
  top: 7px;
  white-space: nowrap;
  font: 600 10px/1 var(--mono);
  letter-spacing: .08em;
  opacity: 0;
  transform: translateX(8px);
  transition: .35s ease;
}

.nav-petal:hover::after,
.nav-petal.active::after { opacity: 1; transform: translateX(0); }
.nav-petal.active { background: linear-gradient(145deg, var(--cyan), var(--pink)); box-shadow: 0 0 22px rgba(94,244,255,.82); transform: rotate(30deg) scale(1.25); }

.panel {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 43vw);
  gap: clamp(24px, 6vw, 88px);
  padding: clamp(48px, 8vw, 104px);
  overflow: hidden;
  z-index: 5;
}

.intro-panel {
  place-items: center;
  text-align: center;
  grid-template-columns: 1fr;
  background: radial-gradient(circle at 50% 45%, rgba(255,244,216,.7), transparent 34rem);
}

.watercourse {
  position: absolute;
  width: 130vw;
  height: 28vh;
  left: -12vw;
  top: 42%;
  transform: rotate(15deg);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(191,234,242,.52), rgba(94,244,255,.13), transparent);
  filter: blur(18px);
}

.title-wrap { position: relative; z-index: 4; max-width: 920px; }
.mono-kicker { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(38,50,56,.72); }
.site-title { position: relative; margin: 0; font: 800 clamp(56px, 12vw, 158px)/.84 var(--display); letter-spacing: -.065em; }
.title-ripple { position: absolute; left: -10%; top: 49%; width: 24%; height: 9px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 28px var(--cyan), 0 0 12px var(--pink); animation: titleRipple 3.4s ease-in-out infinite; }
.intro-copy { max-width: 620px; margin: 28px auto 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.55; }
.begin-stream { margin-top: 34px; border: 1px solid rgba(38,50,56,.22); background: rgba(255,244,216,.68); border-radius: 999px; padding: 14px 22px; box-shadow: 0 10px 30px rgba(94,244,255,.18); letter-spacing: .08em; }

.opening-petals span {
  position: absolute;
  width: 18px;
  height: 30px;
  border-radius: 90% 12% 90% 24%;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(246,216,74,.5);
  animation: petalDrift 9s ease-in-out infinite;
}
.opening-petals span:nth-child(1) { left: 18%; top: 24%; animation-delay: 0s; }
.opening-petals span:nth-child(2) { left: 28%; top: 69%; animation-delay: -1.4s; }
.opening-petals span:nth-child(3) { left: 49%; top: 18%; animation-delay: -2.8s; }
.opening-petals span:nth-child(4) { left: 67%; top: 61%; animation-delay: -4s; }
.opening-petals span:nth-child(5) { left: 81%; top: 34%; animation-delay: -5s; }
.opening-petals span:nth-child(6) { left: 58%; top: 78%; animation-delay: -6s; }

.z-left .chapter-card { grid-column: 2; }
.z-left .diagram { grid-column: 1; grid-row: 1; }
.z-right { grid-template-columns: minmax(320px, 43vw) minmax(0, 1fr); }
.z-right .chapter-card { grid-column: 1; }
.z-right .diagram { grid-column: 2; }
.z-center { grid-template-columns: 1fr; place-items: center; text-align: center; }

.watercolor {
  position: absolute;
  width: clamp(420px, 58vw, 780px);
  height: clamp(360px, 48vw, 660px);
  border-radius: 46% 54% 62% 38% / 43% 48% 52% 57%;
  filter: blur(7px) saturate(1.08);
  opacity: .74;
  z-index: -1;
  animation: diffuse 9s ease-in-out infinite alternate;
}
.bloom-yellow { left: -8vw; top: 14vh; background: radial-gradient(circle, rgba(246,216,74,.62), rgba(255,244,216,.22) 45%, transparent 72%); }
.bloom-blue { right: -10vw; top: 8vh; background: radial-gradient(circle, rgba(191,234,242,.8), rgba(94,244,255,.14) 48%, transparent 75%); }
.bloom-green { left: -8vw; bottom: 0; background: radial-gradient(circle, rgba(168,215,160,.68), rgba(255,244,216,.24) 50%, transparent 74%); }
.bloom-apricot { right: -7vw; top: 12vh; background: radial-gradient(circle, rgba(243,181,155,.65), rgba(255,123,213,.12) 44%, transparent 73%); }
.bloom-final { width: 82vw; height: 72vh; background: radial-gradient(circle at 45% 45%, rgba(191,234,242,.82), rgba(255,244,216,.55), transparent 70%); }

.chapter-card {
  position: relative;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(38,50,56,.14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,244,216,.78), rgba(255,255,255,.36));
  box-shadow: 0 30px 70px rgba(38,50,56,.12), inset 0 0 22px rgba(255,255,255,.35);
  backdrop-filter: blur(9px);
}
.chapter-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(94,244,255,.24); border-radius: 21px; pointer-events: none; }
.chapter-card h2 { margin: 0; font: 800 clamp(44px, 7vw, 92px)/.9 var(--display); letter-spacing: -.045em; }
.poem { margin: 20px 0 0; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.45; }
.hidden-layer { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(12px); transition: max-height .7s ease, opacity .55s ease, transform .55s ease; }
.hidden-layer p { margin: 20px 0 12px; line-height: 1.6; }
.hidden-layer code { display: inline-block; padding: 10px 12px; border-radius: 14px; background: rgba(38,50,56,.08); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.revealed .hidden-layer { max-height: 260px; opacity: 1; transform: translateY(0); }
.revealed { box-shadow: 0 32px 78px rgba(94,244,255,.18), 0 0 26px rgba(255,123,213,.16), inset 0 0 22px rgba(255,255,255,.36); }

.diagram {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  border-radius: 42px;
  background: radial-gradient(circle, rgba(255,255,255,.34), rgba(255,244,216,.16), transparent 66%);
}
.diagram svg { width: min(100%, 470px); overflow: visible; }
.diagram path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wave, .ripple, .route, .teaching-wave { stroke: var(--cyan); stroke-width: 5; filter: drop-shadow(0 0 9px rgba(94,244,255,.86)); }
.diagram-line, .baseline { stroke: rgba(38,50,56,.42); stroke-width: 2; }
.node { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(246,216,74,.8)); }
.node.active { fill: var(--cyan); filter: drop-shadow(0 0 10px var(--cyan)); }
.draw { stroke-dasharray: 780; stroke-dashoffset: 780; animation: drawWave 4.2s ease-in-out infinite alternate; }

.petal-ring { position: absolute; width: 170px; height: 170px; border-radius: 50%; animation: rotateSlow 18s linear infinite; }
.petal-ring i { position: absolute; left: 73px; top: 9px; width: 30px; height: 74px; border-radius: 80% 20% 80% 20%; background: linear-gradient(var(--yellow), #fff2a0); transform-origin: 15px 76px; box-shadow: 0 0 16px rgba(246,216,74,.42); }
.petal-ring i:nth-child(2) { transform: rotate(60deg); }
.petal-ring i:nth-child(3) { transform: rotate(120deg); }
.petal-ring i:nth-child(4) { transform: rotate(180deg); }
.petal-ring i:nth-child(5) { transform: rotate(240deg); }
.petal-ring i:nth-child(6) { transform: rotate(300deg); }

.packet { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50% 45% 55% 50%; background: var(--yellow); font: 600 12px var(--mono); box-shadow: 0 0 22px rgba(246,216,74,.58); animation: packetFloat 5s ease-in-out infinite; }
.p1 { left: 12%; top: 28%; }
.p2 { left: 30%; top: 58%; animation-delay: -.8s; background: var(--pink); }
.p3 { right: 30%; top: 34%; animation-delay: -1.6s; background: var(--cyan); }
.p4 { right: 13%; top: 61%; animation-delay: -2.3s; }
.ripple { animation: ripplePulse 3.5s ease-in-out infinite; }
.ripple.slow { stroke: var(--pink); animation-duration: 5.5s; opacity: .65; }

.contour { stroke: rgba(38,50,56,.27); stroke-width: 2; stroke-dasharray: 8 10; animation: streamDrift 11s linear infinite; }
.c2 { stroke: rgba(168,215,160,.65); }
.c3 { stroke: rgba(246,216,74,.7); }
.lesson-lines b { position: absolute; width: 84%; height: 1px; left: 8%; background: linear-gradient(90deg, transparent, rgba(255,123,213,.55), transparent); animation: scanLine 3.8s ease-in-out infinite; }
.lesson-lines b:nth-child(1) { top: 28%; }
.lesson-lines b:nth-child(2) { top: 47%; animation-delay: -1.1s; }
.lesson-lines b:nth-child(3) { top: 66%; animation-delay: -2.2s; }
.glow-lesson text { font: 11px var(--mono); fill: rgba(38,50,56,.64); letter-spacing: .08em; }

.petal-marker {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 6vh, 64px);
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px 999px 999px 14px;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--yellow), #fff0a2);
  box-shadow: 0 12px 28px rgba(38,50,56,.12), 0 0 22px rgba(246,216,74,.34);
  transition: transform .35s ease, box-shadow .35s ease;
}
.petal-marker:hover { transform: translateX(-50%) translateY(-4px) rotate(-2deg); box-shadow: 0 16px 34px rgba(38,50,56,.14), 0 0 28px rgba(94,244,255,.55); }

.open-canal { position: relative; width: min(82vw, 920px); margin-top: -3vh; }
.open-canal svg { width: 100%; overflow: visible; }
.canal-fill { fill: rgba(191,234,242,.48); filter: blur(1px); }
.merge-wave { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(94,244,255,.78)); animation: waveMerge 6s ease-in-out infinite; }
.w2 { stroke: var(--leaf); animation-delay: -1.4s; }
.w3 { stroke: var(--pink); animation-delay: -2.8s; opacity: .68; }
.floating-caption { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 800 clamp(36px, 8vw, 92px)/1 var(--display); letter-spacing: -.055em; color: rgba(38,50,56,.78); text-shadow: 0 0 20px rgba(255,244,216,.9), 0 0 34px rgba(94,244,255,.35); z-index: 3; }
.final-card { max-width: 760px; }

.panel:not(.in-view) .chapter-card,
.panel:not(.in-view) .diagram { opacity: .38; transform: translateY(30px) scale(.98); }
.chapter-card,
.diagram { transition: opacity .8s ease, transform .8s ease; }
.panel.in-view .chapter-card,
.panel.in-view .diagram { opacity: 1; transform: translateY(0) scale(1); }

@keyframes titleRipple { 0% { transform: translateX(0) scaleX(.4); opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translateX(510%) scaleX(.8); opacity: 0; } }
@keyframes streamDrift { to { stroke-dashoffset: -220; } }
@keyframes sparkTravel { 0% { stroke-dashoffset: 1120; } 100% { stroke-dashoffset: -120; } }
@keyframes petalDrift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(42px, 32px) rotate(78deg); } }
@keyframes diffuse { from { transform: scale(.96) rotate(-2deg); border-radius: 46% 54% 62% 38% / 43% 48% 52% 57%; } to { transform: scale(1.05) rotate(3deg); border-radius: 62% 38% 48% 52% / 48% 62% 38% 52%; } }
@keyframes drawWave { to { stroke-dashoffset: 0; } }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes packetFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-24px) rotate(9deg); } }
@keyframes ripplePulse { 0%,100% { stroke-dasharray: 2 14; opacity: .48; } 50% { stroke-dasharray: 80 8; opacity: 1; } }
@keyframes scanLine { 0%,100% { transform: translateX(-10%); opacity: .1; } 50% { transform: translateX(10%); opacity: .9; } }
@keyframes waveMerge { 0%,100% { transform: translateY(0); stroke-dasharray: 18 12; } 50% { transform: translateY(-10px); stroke-dasharray: 90 16; } }

@media (max-width: 840px) {
  .panel, .z-right { grid-template-columns: 1fr; padding: 84px 24px; }
  .z-left .chapter-card, .z-left .diagram, .z-right .chapter-card, .z-right .diagram { grid-column: 1; grid-row: auto; }
  .diagram { min-height: 250px; }
  .petal-nav { right: 12px; gap: 14px; }
  .nav-petal::after { display: none; }
  .site-title { font-size: clamp(48px, 17vw, 86px); }
}