:root {
  /* Compliance typography source phrase: Interpret “bunnygirl” as a legendary lunar courier rather than a generic mascot: velvet ears tuned to star signals; Space Grotesk** Grotesk* for UI labels. */
  --midnight: #090713;
  --ivory: #FFF4DF;
  --blush: #FF9BCB;
  --blue: #A9D8FF;
  --carrot: #FF7A1A;
  --plum: #4B163F;
  --mint: #9CFFD9;
  --bodoni: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --fraunces: "Fraunces", Georgia, "Iowan Old Style", serif;
  --space: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--midnight); }
body {
  margin: 0;
  color: var(--ivory);
  background: var(--midnight);
  font-family: var(--fraunces);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,244,223,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,155,203,.07) 0 1px, transparent 1.5px),
    linear-gradient(115deg, rgba(255,255,255,.05), transparent 32%, rgba(0,0,0,.18));
  background-size: 17px 19px, 23px 29px, 100% 100%;
  mix-blend-mode: screen;
}

.cursor-glow {
  position: fixed;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: .28;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(156,255,217,.28), rgba(169,216,255,.12) 38%, transparent 68%);
  mix-blend-mode: screen;
}

.questline { position: relative; }
.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 7vw;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,155,203,.18), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(169,216,255,.12), transparent 36%),
    linear-gradient(145deg, var(--midnight), #140A1F 54%, var(--plum));
}

.chapter::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -3;
  background-image:
    radial-gradient(circle, rgba(255,244,223,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(156,255,217,.38) 0 1px, transparent 1.2px);
  background-size: 92px 92px, 137px 137px;
  animation: starDrift 30s linear infinite;
}

.charm-nav {
  position: fixed;
  top: 50%;
  right: 1.4rem;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .65rem;
  border: 1px solid rgba(255,244,223,.2);
  border-radius: 999px;
  background: rgba(9,7,19,.58);
  backdrop-filter: blur(12px);
}

.charm {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--ivory);
  border: 1px solid rgba(255,155,203,.22);
  border-radius: 50%;
  font-family: var(--space);
  font-size: 1rem;
  position: relative;
  transition: transform .45s cubic-bezier(.2,1.7,.3,1), border-color .3s, background .3s;
}
.charm small { position: absolute; right: 110%; opacity: 0; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; transition: opacity .25s; }
.charm:hover small, .charm.active small { opacity: 1; }
.charm.active { transform: scale(1.12) rotate(-8deg); border-color: var(--mint); background: rgba(156,255,217,.12); box-shadow: 0 0 26px rgba(156,255,217,.28); }

.paw-constellation {
  position: fixed;
  left: 4vw;
  top: 10vh;
  width: 92vw;
  height: 42vh;
  z-index: 3;
  pointer-events: none;
  opacity: .65;
}
#pawPath { fill: none; stroke: rgba(156,255,217,.45); stroke-width: 2; stroke-dasharray: 10 18; stroke-linecap: round; }
.paw-dots circle { fill: var(--mint); filter: drop-shadow(0 0 10px var(--mint)); animation: hopGlow 2.4s ease-in-out infinite; }
.paw-dots circle:nth-child(2n) { animation-delay: .45s; }
.paw-dots circle:nth-child(3n) { animation-delay: .9s; }

.runway {
  position: absolute;
  z-index: -1;
  width: 130vw;
  height: 7.5rem;
  left: -15vw;
  top: 57%;
  transform: rotate(-15deg);
  filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.45));
}
.velvet-rope { height: 1.2rem; border-radius: 999px; background: linear-gradient(90deg, var(--plum), var(--blush), var(--plum)); box-shadow: 0 0 0 10px rgba(75,22,63,.24); }
.measuring-tape { background: repeating-linear-gradient(90deg, var(--ivory) 0 34px, var(--blush) 34px 38px), linear-gradient(var(--ivory), var(--ivory)); height: 3.2rem; border: 2px solid var(--plum); opacity: .84; }
.constellation-path { height: .4rem; background: linear-gradient(90deg, transparent, var(--mint), var(--blue), transparent); box-shadow: 0 0 28px var(--mint); }
.mirror-crack { height: .55rem; background: linear-gradient(90deg, transparent, var(--blue), var(--ivory), var(--blue), transparent); clip-path: polygon(0 35%,12% 60%,24% 42%,35% 72%,48% 22%,60% 68%,72% 38%,83% 76%,100% 45%,100% 62%,84% 94%,70% 55%,59% 88%,47% 39%,36% 91%,23% 55%,12% 82%,0 48%); }
.spotlight-ribbon { width: 58rem; height: 58rem; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,244,223,.35), rgba(169,216,255,.15) 38%, transparent 68%); }

.curtain-scene { background: radial-gradient(circle at 50% 10%, rgba(255,244,223,.14), transparent 38%), linear-gradient(115deg, #06040D, var(--midnight) 55%, var(--plum)); }
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 58%;
  z-index: 4;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 7px, transparent 7px 42px),
    radial-gradient(circle at 50% 0, rgba(255,155,203,.22), transparent 45%),
    linear-gradient(90deg, #210A22, var(--plum), #23071E);
  transition: transform 1.2s cubic-bezier(.77,0,.18,1), clip-path 1.2s;
}
.left-curtain { left: 0; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); }
.right-curtain { right: 0; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
body.curtain-open .left-curtain { transform: translateX(-75%) skewY(-7deg); }
body.curtain-open .right-curtain { transform: translateX(75%) skewY(7deg); }
.stage-bulbs { position: absolute; top: 1.2rem; left: 8vw; right: 8vw; height: 2rem; background: radial-gradient(circle, var(--blush) 0 26%, transparent 31%) 0 0/5.6rem 2rem; filter: drop-shadow(0 0 12px var(--blush)); animation: bulbBlink 4s steps(5) infinite; z-index: 5; }
.wordmark-wrap { position: relative; z-index: 6; text-align: center; max-width: 72rem; text-shadow: 0 0 30px rgba(255,244,223,.28); }
.kicker, .chapter-mark, .inventory b, .coordinate-row, .charm-ledger, .ticket-stub span { font-family: var(--space); text-transform: uppercase; letter-spacing: .18em; }
.kicker { color: var(--mint); font-size: .76rem; }
.wordmark { font-family: var(--bodoni); font-size: clamp(4rem, 13vw, 13rem); font-weight: 700; line-height: .82; margin: .2em 0; color: var(--ivory); }
.embroidered { font-size: clamp(1.1rem, 2vw, 1.6rem); color: rgba(255,244,223,.78); }
.ticket-stub, .dressing-card, .map-card, .mirror-note, .glove-card {
  border: 1px solid rgba(255,244,223,.38);
  background: linear-gradient(135deg, rgba(255,244,223,.9), rgba(255,244,223,.72));
  color: var(--midnight);
  box-shadow: 0 1.4rem 4rem rgba(0,0,0,.38);
}
.ticket-stub { position: absolute; left: 8vw; bottom: 7vh; z-index: 6; width: min(23rem, 72vw); padding: 1.3rem 1.5rem; transform: rotate(-6deg); clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 4% 50%); }
.ticket-stub strong { display: block; font-family: var(--bodoni); font-size: 2rem; margin: .25rem 0; }
.ticket-stub::after { content: ""; position: absolute; inset: .45rem; border: 1px dashed var(--plum); clip-path: inherit; animation: borderPulse 2.6s ease-in-out infinite; }
.tassel { position: absolute; top: 14vh; z-index: 7; color: var(--ivory); font-size: 2rem; filter: drop-shadow(0 0 12px var(--ivory)); }
.tassel-one { left: 18vw; } .tassel-two { right: 18vw; }

.atelier-scene { grid-template-columns: 1fr 1fr; background: radial-gradient(circle at 70% 26%, rgba(255,155,203,.2), transparent 26%), linear-gradient(155deg, var(--midnight), #201127, var(--plum)); }
.rabbit-arch { width: min(34rem, 78vw); height: min(42rem, 72vh); background: linear-gradient(180deg, rgba(169,216,255,.22), rgba(255,244,223,.06)); border: 2px solid rgba(255,244,223,.42); clip-path: path("M 160 420 C 55 360 42 210 108 130 C 75 48 92 4 128 72 C 151 17 192 17 214 72 C 250 4 268 48 235 130 C 305 210 290 360 160 420 Z"); filter: drop-shadow(0 0 36px rgba(169,216,255,.25)); }
.silhouette { width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 88%, rgba(9,7,19,.9), rgba(9,7,19,.3) 34%, transparent 62%); position: relative; }
.silhouette span { position: absolute; left: 46%; top: 34%; width: 4rem; height: 14rem; border-radius: 3rem 3rem 1rem 1rem; background: var(--midnight); box-shadow: -1.5rem -6rem 0 -1rem var(--midnight), 1.5rem -6rem 0 -1rem var(--midnight); transform: rotate(-5deg); }
.dressing-card, .map-card, .mirror-note { position: relative; max-width: 32rem; padding: clamp(1.4rem, 3vw, 3rem); border-radius: 1.2rem; }
.tilt-left { transform: rotate(4deg); } .tilt-right { transform: rotate(-4deg); }
h2 { font-family: var(--bodoni); font-size: clamp(3rem, 6vw, 7rem); line-height: .88; margin: .1em 0 .2em; color: var(--plum); }
.clue { font-size: clamp(1.05rem, 1.7vw, 1.42rem); line-height: 1.55; }
.clue span, .clue.revealed { background-image: linear-gradient(90deg, var(--carrot), var(--plum)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; }
.inventory { display: grid; gap: .25rem; padding-top: 1rem; border-top: 1px solid rgba(75,22,63,.22); }
.inventory span { color: var(--plum); }
.bow-prop { position: absolute; right: 12vw; bottom: 13vh; width: 13rem; height: 8rem; animation: floatBow 5s ease-in-out infinite; }
.bow-prop i { position: absolute; top: 1rem; width: 6.2rem; height: 5.5rem; background: radial-gradient(circle at 40% 40%, var(--ivory), var(--blush) 45%, var(--plum)); border-radius: 70% 20% 70% 25%; }
.bow-prop i:first-child { left: 0; transform: rotate(18deg); } .bow-prop i:nth-child(2) { right: 0; transform: scaleX(-1) rotate(18deg); }
.bow-prop b { position: absolute; left: 50%; top: 2.4rem; width: 2.5rem; height: 2.8rem; transform: translateX(-50%); border-radius: 50%; background: var(--ivory); box-shadow: 0 0 20px var(--blush); }
.glove-card { position: absolute; left: 8vw; bottom: 10vh; width: 16rem; padding: 1.2rem; border-radius: 2rem 2rem .6rem 2rem; transform: rotate(-9deg); }
.glove-finger { display: block; width: 8rem; height: 2rem; border-radius: 2rem; background: var(--ivory); box-shadow: 2rem .5rem 0 -.35rem var(--ivory), 4rem .85rem 0 -.55rem var(--ivory); }

.map-scene { background: radial-gradient(circle at 10% 70%, rgba(156,255,217,.14), transparent 28%), linear-gradient(130deg, #100817, var(--midnight), #171C2F); }
.map-card { position: absolute; left: 8vw; top: 16vh; z-index: 2; }
.coordinate-row { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .68rem; }
.coordinate-row span { border: 1px solid var(--plum); padding: .35rem .5rem; border-radius: 999px; }
.comet-map { width: min(52rem, 80vw); margin-left: 14vw; filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.4)); }
.map-fold { fill: rgba(255,244,223,.86); stroke: var(--plum); stroke-width: 3; }
.comet-trail { fill: none; stroke: var(--carrot); stroke-width: 5; stroke-dasharray: 18 13; stroke-linecap: round; filter: drop-shadow(0 0 12px var(--carrot)); animation: dashRun 3s linear infinite; }
.rabbit-tracks circle { fill: var(--mint); }
.comet-head { fill: var(--carrot); filter: drop-shadow(0 0 18px var(--carrot)); }
.carrot-comet { position: absolute; right: 15vw; top: 15vh; width: 12rem; height: 2.5rem; transform: rotate(-24deg); background: linear-gradient(90deg, transparent, rgba(255,122,26,.2), var(--carrot)); border-radius: 999px; animation: cometPass 4.8s ease-in-out infinite; }
.carrot-comet span { position: absolute; right: -1rem; top: -.8rem; width: 4rem; height: 4rem; background: var(--carrot); clip-path: polygon(50% 0, 82% 50%, 50% 100%, 18% 50%); filter: drop-shadow(0 0 20px var(--carrot)); }

.mirror-scene { background: radial-gradient(circle at 70% 20%, rgba(169,216,255,.22), transparent 24%), linear-gradient(160deg, var(--plum), var(--midnight) 48%, #07131A); }
.mirror-cluster { display: flex; gap: 2rem; transform: rotate(-7deg); }
.compact-mirror { width: clamp(8rem, 16vw, 15rem); height: clamp(10rem, 20vw, 18rem); border-radius: 50% 50% 44% 44%; border: 2px solid rgba(255,244,223,.65); background: radial-gradient(circle at 40% 25%, rgba(255,244,223,.85), rgba(169,216,255,.35) 34%, rgba(75,22,63,.55) 70%); box-shadow: inset 0 0 35px rgba(255,244,223,.18), 0 2rem 4rem rgba(0,0,0,.38); cursor: pointer; transition: transform .45s, box-shadow .45s; }
.compact-mirror span { display: block; width: 64%; height: 64%; margin: 18% auto; border-radius: 50%; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.6) 41% 45%, transparent 46%), radial-gradient(circle, rgba(156,255,217,.3), transparent 64%); mix-blend-mode: screen; }
.compact-mirror.active, .compact-mirror:hover { transform: translateY(-1rem) scale(1.06); box-shadow: 0 0 45px rgba(169,216,255,.44), 0 2rem 4rem rgba(0,0,0,.38); }
.mirror-note { position: absolute; right: 8vw; bottom: 13vh; max-width: 30rem; }
.ear-arch-array { position: absolute; left: 6vw; bottom: 7vh; display: flex; gap: .7rem; opacity: .65; }
.ear-arch-array span { width: 5rem; height: 8rem; border: 1px solid var(--blue); border-radius: 50% 50% 18% 18%; box-shadow: inset 0 0 22px rgba(169,216,255,.25); }

.encore-scene { background: radial-gradient(circle at 50% 50%, rgba(255,244,223,.18), transparent 35%), linear-gradient(180deg, #0B0917, var(--midnight)); }
.moon-spotlight { width: min(52rem, 86vw); min-height: min(52rem, 86vw); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,223,.92), rgba(255,244,223,.58) 35%, rgba(169,216,255,.15) 58%, transparent 72%); color: var(--midnight); box-shadow: 0 0 80px rgba(255,244,223,.32); }
.ledger { text-align: center; max-width: 36rem; padding: 2rem; }
.ledger h2 { color: var(--plum); }
.ledger h3 { font-family: var(--bodoni); font-size: clamp(2.5rem, 7vw, 6rem); margin: .2em 0; color: var(--midnight); }
.charm-ledger { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
.charm-ledger span { border: 1px solid var(--plum); border-radius: 999px; padding: .45rem .75rem; font-size: .7rem; }
.final-pawprints i { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background: var(--mint); filter: drop-shadow(0 0 10px var(--mint)); animation: fadeHop 3s ease-in-out infinite; }
.final-pawprints i:nth-child(1){left:18%;bottom:28%;}.final-pawprints i:nth-child(2){left:28%;bottom:34%;animation-delay:.3s}.final-pawprints i:nth-child(3){left:39%;bottom:41%;animation-delay:.6s}.final-pawprints i:nth-child(4){right:34%;top:28%;animation-delay:.9s}.final-pawprints i:nth-child(5){right:20%;top:20%;animation-delay:1.2s}

.chapter.in-view .dressing-card, .chapter.in-view .map-card, .chapter.in-view .mirror-note, .chapter.in-view .ledger { animation: chapterEnter .85s cubic-bezier(.2,1.3,.25,1) both; }
.chapter.in-view .charm-ledger span { animation: charmBounce .75s cubic-bezier(.2,1.7,.3,1) both; }
.chapter.in-view .charm-ledger span:nth-child(2){animation-delay:.1s}.chapter.in-view .charm-ledger span:nth-child(3){animation-delay:.2s}.chapter.in-view .charm-ledger span:nth-child(4){animation-delay:.3s}.chapter.in-view .charm-ledger span:nth-child(5){animation-delay:.4s}

@keyframes starDrift { to { transform: translate3d(-80px, 70px, 0); } }
@keyframes hopGlow { 50% { transform: translateY(-10px); opacity: .45; } }
@keyframes bulbBlink { 50% { filter: drop-shadow(0 0 5px var(--blush)); opacity: .72; } }
@keyframes borderPulse { 50% { border-color: var(--carrot); } }
@keyframes floatBow { 50% { transform: translateY(-1.4rem) rotate(5deg); } }
@keyframes dashRun { to { stroke-dashoffset: -62; } }
@keyframes cometPass { 50% { transform: translate(-6rem, 3rem) rotate(-24deg); opacity: .68; } }
@keyframes chapterEnter { from { opacity: 0; transform: translateY(2rem) rotate(0deg) scale(.96); } }
@keyframes charmBounce { from { opacity: 0; transform: translateY(1rem) scale(.8); } }
@keyframes fadeHop { 50% { transform: translate(1.3rem, -1.6rem); opacity: .3; } }

@media (max-width: 780px) {
  .charm-nav { right: .5rem; transform: translateY(-50%) scale(.82); }
  .chapter { padding: 5rem 1.2rem; }
  .atelier-scene { grid-template-columns: 1fr; gap: 2rem; }
  .map-card, .mirror-note, .glove-card, .ticket-stub { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1rem; }
  .comet-map { margin-left: 0; width: 96vw; }
  .mirror-cluster { gap: .5rem; }
  .runway { width: 170vw; left: -35vw; }
}