:root {
  /* Typography token trace: Space Grotesk* Grotesk** for interface labels */
  --night: #160A2E;
  --orchid: #FF4FD8;
  --mint: #7CFFCB;
  --petal: #FFF4FA;
  --berry: #4B1248;
  --pollen: #FFE66D;
  --cyan: #54D7FF;
  --progress: 0;
  --room: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--petal);
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 79, 216, .22), transparent 26%),
    radial-gradient(circle at 72% 72%, rgba(124, 255, 203, .13), transparent 24%),
    radial-gradient(circle at 45% 10%, rgba(84, 215, 255, .12), transparent 20%),
    linear-gradient(120deg, #160A2E 0%, #240D3B 48%, #160A2E 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle, rgba(255, 244, 250, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 230, 109, .18) 0 1px, transparent 1.5px);
  background-size: 74px 74px, 113px 113px;
  animation: pollenDrift 16s linear infinite;
}

.garden {
  position: fixed;
  inset: 0;
  display: flex;
  width: 500vw;
  height: 100vh;
  transform: translate3d(calc(var(--progress) * -400vw), 0, 0);
  transition: transform .18s ease-out;
  cursor: grab;
}

.garden.is-dragging {
  cursor: grabbing;
  transition: none;
}

.room {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  isolation: isolate;
}

.room::before {
  content: "";
  position: absolute;
  inset: 7vh 3vw 9vh;
  border: 1px solid rgba(84, 215, 255, .18);
  border-radius: 45% 8% 42% 9% / 8% 38% 10% 42%;
  box-shadow: inset 0 0 38px rgba(84, 215, 255, .08), 0 0 28px rgba(255, 79, 216, .08);
  pointer-events: none;
}

.progress-vine {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 20;
  height: 5px;
  width: calc(var(--progress) * 100vw);
  background: linear-gradient(90deg, var(--orchid), var(--mint), var(--pollen));
  box-shadow: 0 0 18px var(--orchid), 0 0 28px var(--mint);
}

.bulb-rail {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 25;
  display: flex;
  gap: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 244, 250, .16);
  border-radius: 999px;
  background: rgba(22, 10, 46, .72);
  box-shadow: 0 0 24px rgba(255, 79, 216, .16);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.rail-bulb {
  position: relative;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50% 50% 48% 10%;
  background: var(--berry);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 250, .2), 0 0 0 rgba(255, 79, 216, 0);
  transform: rotate(-45deg) scale(1);
  transition: transform .35s cubic-bezier(.2, 1.8, .3, 1), background .35s, box-shadow .35s;
}

.rail-bulb span {
  position: absolute;
  left: 50%;
  bottom: 24px;
  color: var(--petal);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-50%) rotate(45deg) translateY(5px);
  transition: opacity .25s, transform .25s;
}

.rail-bulb:hover,
.rail-bulb.is-active {
  background: var(--orchid);
  box-shadow: 0 0 16px var(--orchid), 0 0 24px rgba(124, 255, 203, .35);
  transform: rotate(-45deg) scale(1.32);
}

.rail-bulb:hover span,
.rail-bulb.is-active span {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg) translateY(0);
}

.greenhouse-ribs,
.greenhouse-ribs::before,
.greenhouse-ribs::after {
  position: absolute;
  inset: 10vh 8vw 8vh;
  content: "";
  border: 2px solid rgba(84, 215, 255, .22);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 0 30px rgba(84, 215, 255, .14);
}

.greenhouse-ribs::before {
  inset: 7vh 13vw 0;
}

.greenhouse-ribs::after {
  inset: 14vh 24vw 0;
}

.gate {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  background:
    linear-gradient(90deg, rgba(75, 18, 72, .92), rgba(22, 10, 46, .72)),
    repeating-linear-gradient(90deg, transparent 0 9vw, rgba(84, 215, 255, .16) 9.2vw 9.35vw);
  border-color: rgba(255, 79, 216, .34);
  box-shadow: inset 0 0 80px rgba(255, 79, 216, .2);
  transition: transform .4s ease-out;
}

.gate-left { left: 0; border-right: 1px solid rgba(255, 244, 250, .2); transform: translateX(calc(var(--progress) * -48vw)); }
.gate-right { right: 0; border-left: 1px solid rgba(255, 244, 250, .2); transform: translateX(calc(var(--progress) * 48vw)); }

.gate-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, 86vw);
  text-align: center;
  transform: translate(-50%, -50%);
}

.jp-note,
.vertical-jp {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: var(--mint);
  letter-spacing: .32em;
  text-shadow: 0 0 18px rgba(124, 255, 203, .85);
}

.wordmark,
.final-word,
.bloom-core span {
  margin: 0;
  font-family: "Bungee Shade", "Space Grotesk", system-ui, sans-serif;
  color: var(--orchid);
  text-shadow: 0 0 8px var(--orchid), 0 0 26px rgba(255, 79, 216, .72), 8px 8px 0 rgba(124, 255, 203, .18);
  animation: neonInflate 2.8s ease-in-out infinite;
}

.wordmark {
  font-size: clamp(56px, 11vw, 164px);
  line-height: .95;
  letter-spacing: .02em;
  transform: scale(calc(1 + var(--progress) * .14));
}

.spell-line {
  margin: 22px auto 0;
  color: var(--petal);
  font-size: clamp(18px, 2.2vw, 30px);
}

.gate-hint,
.caption-tag,
.final-tag {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 230, 109, .42);
  border-radius: 999px;
  color: var(--pollen);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(75, 18, 72, .45);
  box-shadow: 0 0 20px rgba(255, 230, 109, .12);
}

.petal-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 54px;
  border-radius: 70% 12% 70% 18%;
  background: linear-gradient(160deg, var(--orchid), rgba(255, 244, 250, .65));
  box-shadow: 0 0 16px var(--orchid);
  transform: translate(-50%, -50%) rotate(calc(var(--i, 0) * 45deg)) translateY(calc(var(--progress) * -260px)) scale(calc(var(--progress) + .2));
  opacity: calc(var(--progress) * 2.2);
}

.petal-burst i:nth-child(1) { --i: 0; }
.petal-burst i:nth-child(2) { --i: 1; }
.petal-burst i:nth-child(3) { --i: 2; }
.petal-burst i:nth-child(4) { --i: 3; }
.petal-burst i:nth-child(5) { --i: 4; }
.petal-burst i:nth-child(6) { --i: 5; }
.petal-burst i:nth-child(7) { --i: 6; }
.petal-burst i:nth-child(8) { --i: 7; }

.vine-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vine-map path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: calc(1600 - (var(--progress) * 1600));
  filter: drop-shadow(0 0 14px rgba(124, 255, 203, .75));
}

.caption-tag { position: absolute; left: 9vw; top: 13vh; margin: 0; }

.confession {
  position: absolute;
  width: 190px;
  min-height: 120px;
  padding: 26px 22px;
  border: 1px solid rgba(255, 244, 250, .28);
  border-radius: 20px 20px 60px 20px;
  background: linear-gradient(145deg, rgba(255, 244, 250, .94), rgba(255, 79, 216, .74));
  color: var(--berry);
  font-family: "Bungee Shade", system-ui;
  font-size: 30px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .34), 0 0 28px rgba(255, 79, 216, .28);
}

.confession span {
  display: block;
  margin-top: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .18em;
}

.slip-a { left: 18vw; top: 31vh; transform: rotate(-10deg); }
.slip-b { left: 47vw; top: 18vh; transform: rotate(8deg); }
.slip-c { left: 68vw; top: 53vh; transform: rotate(-4deg); }

.pollen-cloud { position: absolute; right: 14vw; top: 22vh; width: 170px; height: 150px; }
.pollen-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--pollen);
  box-shadow: 0 0 16px var(--pollen);
  transition: transform .32s cubic-bezier(.2, 1.8, .3, 1), box-shadow .32s;
}
.pollen-dot::after {
  content: attr(data-note);
  position: absolute;
  left: 50%;
  top: -34px;
  white-space: nowrap;
  opacity: 0;
  color: var(--pollen);
  font-size: 12px;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .25s, transform .25s;
}
.pollen-dot:hover { transform: scale(2.4); box-shadow: 0 0 30px var(--pollen), 0 0 50px var(--orchid); }
.pollen-dot:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.pollen-dot:nth-child(1) { left: 10px; top: 30px; }
.pollen-dot:nth-child(2) { left: 95px; top: 5px; }
.pollen-dot:nth-child(3) { left: 66px; top: 96px; }

.side-poem,
.bloom-copy,
.pond-copy,
.last-line {
  position: absolute;
  max-width: 460px;
  color: rgba(255, 244, 250, .86);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.32;
}
.side-poem { left: 10vw; bottom: 16vh; }

.bloom-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(42vw, 530px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 109, .22), rgba(255, 79, 216, .16) 38%, transparent 67%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px rgba(255, 79, 216, .28);
}

.bloom-core span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: clamp(54px, 8vw, 128px);
  transform: translate(-50%, -50%);
}

.orbital-word {
  position: absolute;
  color: var(--mint);
  font-size: clamp(18px, 2vw, 34px);
  font-weight: 700;
  text-shadow: 0 0 14px var(--mint);
  animation: orbit 9s linear infinite;
}
.orbit-one { left: 45%; top: -5%; transform-origin: 22px 285px; }
.orbit-two { right: -9%; top: 52%; animation-duration: 11s; transform-origin: -170px -10px; }
.orbit-three { left: -6%; bottom: 20%; animation-duration: 13s; transform-origin: 260px -140px; }

.petal-letter {
  position: absolute;
  width: 120px;
  height: 170px;
  display: grid;
  place-items: center;
  border-radius: 78% 12% 76% 18%;
  color: var(--petal);
  font-family: "Bungee Shade", system-ui;
  font-size: 70px;
  background: linear-gradient(145deg, rgba(255, 79, 216, .8), rgba(124, 255, 203, .24));
  box-shadow: 0 0 32px rgba(255, 79, 216, .48);
  animation: floatPetal 5s ease-in-out infinite;
}
.p1 { left: 12vw; top: 19vh; transform: rotate(-28deg); }
.p2 { left: 24vw; bottom: 11vh; transform: rotate(18deg); animation-delay: -.7s; }
.p3 { right: 25vw; top: 13vh; transform: rotate(38deg); animation-delay: -1.4s; }
.p4 { right: 12vw; bottom: 17vh; transform: rotate(-18deg); animation-delay: -2s; }
.p5 { left: 50vw; bottom: 5vh; transform: rotate(5deg); animation-delay: -2.8s; }

.bloom-copy { left: 8vw; top: 65vh; }
.seed-packet {
  position: absolute;
  right: 10vw;
  top: 18vh;
  padding: 24px 30px;
  border: 1px dashed var(--pollen);
  border-radius: 24px;
  color: var(--pollen);
  background: rgba(75, 18, 72, .76);
  box-shadow: 0 0 24px rgba(255, 230, 109, .16);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.moon {
  position: absolute;
  right: 16vw;
  top: 12vh;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, var(--petal), var(--pollen) 56%, rgba(255, 230, 109, .04) 59%);
  box-shadow: 0 0 46px rgba(255, 230, 109, .55);
}

.pond {
  position: absolute;
  left: 11vw;
  right: 11vw;
  bottom: 12vh;
  height: 44vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(84, 215, 255, .18), rgba(75, 18, 72, .5) 48%, rgba(22, 10, 46, .12) 70%);
  border: 1px solid rgba(84, 215, 255, .34);
  box-shadow: inset 0 0 60px rgba(84, 215, 255, .14), 0 0 42px rgba(255, 79, 216, .12);
}

.pond-word {
  position: absolute;
  left: 50%;
  top: 28%;
  font-family: "Bungee Shade", system-ui;
  font-size: clamp(46px, 9vw, 142px);
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan);
  transform: translate(-50%, -50%);
}

.reflection {
  top: 57%;
  opacity: .28;
  filter: blur(1px);
  transform: translate(-50%, -50%) scaleY(-.62) skewX(-12deg);
}

.ripple {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 220px;
  height: 48px;
  border: 1px solid rgba(124, 255, 203, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 3.6s ease-out infinite;
}
.r2 { animation-delay: -1.2s; }
.r3 { animation-delay: -2.4s; }

.dew {
  position: absolute;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 54% 46% 58% 42%;
  color: var(--night);
  font-weight: 700;
  background: radial-gradient(circle at 30% 20%, var(--petal), var(--mint) 52%, rgba(84, 215, 255, .42));
  box-shadow: 0 0 26px rgba(124, 255, 203, .55);
  text-align: center;
}
.dew span { color: var(--berry); font-family: "Noto Sans JP", sans-serif; }
.dew-a { left: 14vw; top: 20vh; }
.dew-b { right: 24vw; top: 42vh; }
.pond-copy { left: 14vw; top: 12vh; }
.vertical-jp { position: absolute; right: 8vw; bottom: 18vh; writing-mode: vertical-rl; }

.root-network {
  position: absolute;
  inset: 20vh 8vw 18vh;
  background:
    linear-gradient(25deg, transparent 49.7%, rgba(124, 255, 203, .55) 50%, transparent 50.3%),
    linear-gradient(-18deg, transparent 49.7%, rgba(255, 79, 216, .5) 50%, transparent 50.3%),
    linear-gradient(90deg, transparent 49.7%, rgba(84, 215, 255, .45) 50%, transparent 50.3%);
  filter: drop-shadow(0 0 13px rgba(124, 255, 203, .72));
  opacity: .72;
}

.coordinate-flower {
  position: absolute;
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--night) 0 33%, transparent 34%),
    conic-gradient(from 20deg, var(--orchid), var(--mint), var(--pollen), var(--cyan), var(--orchid));
  box-shadow: 0 0 34px rgba(255, 79, 216, .42), 0 0 50px rgba(124, 255, 203, .18);
}

.coordinate-flower span {
  font-family: "Bungee Shade", system-ui;
  font-size: 78px;
  color: var(--petal);
  text-shadow: 0 0 18px var(--orchid), 0 0 22px var(--cyan);
}

.coordinate-flower small {
  position: absolute;
  bottom: -34px;
  color: var(--mint);
  white-space: nowrap;
}

.flower-x { left: 13vw; top: 35vh; }
.flower-y { left: 41vw; top: 18vh; }
.flower-z { right: 15vw; top: 40vh; }
.final-tag { position: absolute; left: 9vw; top: 12vh; margin: 0; }
.final-word { position: absolute; left: 50%; bottom: 15vh; font-size: clamp(70px, 12vw, 180px); transform: translateX(-50%); }
.last-line { right: 9vw; bottom: 12vh; color: var(--petal); text-align: right; }

.hover-bloom {
  transition: transform .34s cubic-bezier(.2, 1.8, .3, 1), box-shadow .34s, filter .34s;
}
.hover-bloom:hover {
  transform: translateY(-8px) scale(1.08) rotate(var(--tilt, 0deg));
  filter: saturate(1.22);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .36), 0 0 38px rgba(255, 79, 216, .42), 0 0 42px rgba(124, 255, 203, .18);
}
.bloom-core.hover-bloom:hover { transform: translate(-50%, -50%) scale(1.05); }
.coordinate-flower.hover-bloom:hover { transform: scale(1.1) rotate(8deg); }

@keyframes neonInflate {
  0%, 100% { text-shadow: 0 0 8px var(--orchid), 0 0 22px rgba(255, 79, 216, .68), 8px 8px 0 rgba(124, 255, 203, .14); }
  50% { text-shadow: 0 0 16px var(--orchid), 0 0 42px rgba(255, 79, 216, .94), -8px 6px 0 rgba(255, 230, 109, .18); }
}

@keyframes pollenDrift {
  to { background-position: 74px 74px, -113px 113px; }
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

@keyframes floatPetal {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -22px; }
}

@keyframes ripple {
  0% { width: 120px; height: 22px; opacity: .78; }
  100% { width: 760px; height: 150px; opacity: 0; }
}

@media (max-width: 760px) {
  .confession { width: 145px; min-height: 100px; font-size: 24px; }
  .petal-letter { width: 82px; height: 120px; font-size: 44px; }
  .coordinate-flower { width: 150px; height: 150px; }
  .coordinate-flower span { font-size: 54px; }
  .bulb-rail { gap: 12px; }
}