:root {
  /* Design typography tokens retained for compliance: Space Grotesk** clean conversational text; IBM Plex Mono** tiny timestamps faux chat receipts. */
  --void: #080612;
  --grape: #150B2E;
  --pink: #FF2DAA;
  --cyan: #1DF7FF;
  --lime: #B7FF2A;
  --cream: #F1E7D0;
  --violet: #7A3CFF;
  --cherry: #FF4B3E;
  --display: "Bungee", Impact, fantasy;
  --syrup: "Shrikhand", Georgia, serif;
  --body: "Space Grotesk", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--void); color: var(--cream); font-family: var(--body); }
body { background: radial-gradient(circle at 18% 18%, rgba(122,60,255,.28), transparent 30%), linear-gradient(135deg, var(--void), var(--grape) 55%, #080612); }
button { font: inherit; color: inherit; }

.ambient-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .65; animation: drift 12s ease-in-out infinite alternate; }
.orb-one { width: 22rem; height: 22rem; background: var(--pink); left: 8vw; top: 8vh; }
.orb-two { width: 16rem; height: 16rem; background: var(--cyan); left: 58vw; top: 58vh; animation-delay: -4s; }
.orb-three { width: 10rem; height: 10rem; background: var(--lime); left: 82vw; top: 12vh; animation-delay: -7s; }
.orb-four { width: 24rem; height: 24rem; background: var(--violet); left: 34vw; top: 30vh; animation-delay: -2s; }

.side-gallery { position: relative; z-index: 1; height: 100vh; display: flex; gap: 6vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 10vw; }
.side-gallery::-webkit-scrollbar { display: none; }
.rail { position: fixed; left: 0; right: 0; bottom: 18vh; height: 2px; background: rgba(29,247,255,.2); box-shadow: 0 0 18px var(--cyan); z-index: 1; }
.rail span { display: block; height: 100%; width: 36%; background: linear-gradient(90deg, transparent, var(--cyan), var(--pink)); animation: railPulse 3s ease-in-out infinite; }

.panel { flex: 0 0 88vw; min-width: 88vw; height: 100vh; position: relative; scroll-snap-align: center; isolation: isolate; padding: 8vh 5vw; }
.panel::before { content: attr(data-mark); position: absolute; font-family: var(--display); font-size: 32vw; color: rgba(241,231,208,.035); right: -2vw; top: 2vh; z-index: -1; }
.panel-glow { position: absolute; inset: 7vh 2vw 10vh; border-radius: 4rem; background: radial-gradient(circle at 20% 30%, rgba(255,45,170,.22), transparent 28%), radial-gradient(circle at 70% 55%, rgba(29,247,255,.18), transparent 26%), linear-gradient(130deg, rgba(21,11,46,.86), rgba(8,6,18,.58)); border: 1px solid rgba(241,231,208,.09); box-shadow: inset 0 0 70px rgba(122,60,255,.25), 0 0 80px rgba(8,6,18,.8); z-index: -1; }

.placard { position: absolute; max-width: 35rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(241,231,208,.24); background: rgba(8,6,18,.68); border-radius: 1.4rem; box-shadow: 0 0 28px rgba(255,45,170,.18); backdrop-filter: blur(8px); }
.hero-copy { left: 3vw; top: 11vh; max-width: 49rem; background: transparent; border: 0; box-shadow: none; }
.stagger.high { left: 5vw; top: 14vh; transform: rotate(-2deg); }
.stagger.low { right: 9vw; bottom: 16vh; transform: rotate(2deg); }
.stagger.mid { left: 10vw; top: 23vh; transform: rotate(-1deg); }
.rightish { right: 7vw; left: auto; }
.final-card { left: 7vw; top: 18vh; max-width: 42rem; transform: rotate(-1.5deg); }

.micro { margin: 0 0 .7rem; font-family: var(--mono); color: var(--lime); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
h1, h2 { margin: 0; font-family: var(--display); line-height: .86; letter-spacing: -.05em; text-shadow: .06em .08em 0 rgba(255,45,170,.45), 0 0 28px rgba(29,247,255,.4); }
h1 { font-size: clamp(4.8rem, 11vw, 12rem); transform: rotate(-2deg); }
h1 span { display: inline-block; }
h2 { font-size: clamp(3.4rem, 7.5vw, 8.7rem); }
.syrup { font-family: var(--syrup); color: var(--pink); font-size: clamp(1.4rem, 2.4vw, 2.5rem); margin: 1rem 0 .7rem; text-shadow: 0 0 18px rgba(255,45,170,.55); }
.body-copy { max-width: 34rem; font-size: clamp(1rem, 1.35vw, 1.32rem); line-height: 1.45; margin: .6rem 0 0; color: rgba(241,231,208,.86); }
.underlined { position: relative; }
.underlined::after, .cool-line, .underline-loop { content: ""; position: absolute; height: .18em; border-radius: 999px; background: var(--pink); box-shadow: 0 0 18px var(--pink); transform-origin: left center; animation: drawLine 1.7s cubic-bezier(.2,.8,.2,1) both; }
.underlined::after { left: .03em; right: .04em; bottom: -.06em; }

.marble-scene, .mini-bust, .marble-hand, .column-stack { transition: transform .35s ease; }
.hero-bust { position: absolute; right: 11vw; bottom: 15vh; width: 19rem; height: 31rem; filter: drop-shadow(0 0 28px rgba(29,247,255,.22)); }
.bust-head { position: absolute; left: 3.8rem; top: 1rem; width: 12rem; height: 13rem; border-radius: 48% 52% 44% 44%; background: radial-gradient(circle at 33% 25%, #fff8e8, var(--cream) 42%, #b8aa94); box-shadow: inset -22px -20px 0 rgba(21,11,46,.18); }
.bust-neck { position: absolute; left: 6.4rem; top: 12.5rem; width: 6.6rem; height: 7rem; background: linear-gradient(90deg, #c7b99f, var(--cream), #ad9e88); }
.plinth, .soft-plinth { position: absolute; text-align: center; font-family: var(--display); color: var(--grape); background: linear-gradient(135deg, #fff6df, var(--cream), #ad9e88); border-radius: .8rem .8rem .25rem .25rem; box-shadow: 0 0 34px rgba(241,231,208,.18); }
.plinth { left: 2rem; bottom: 0; width: 15rem; padding: 2.2rem 1rem; }
.hush-finger { position: absolute; left: 9rem; top: 7.2rem; width: 2rem; height: 9rem; border-radius: 999px; background: linear-gradient(#fff5df, #c3b49d); transform: rotate(-8deg); box-shadow: 0 0 0 .45rem rgba(255,45,170,.18); }
.earring { position: absolute; right: .9rem; top: 6.3rem; width: .8rem; height: .8rem; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 16px var(--cyan); }
.brow { position: absolute; top: 4.2rem; width: 2.5rem; height: .55rem; background: var(--lime); border-radius: 1rem; box-shadow: 0 0 12px var(--lime); }
.brow-left { left: 2.4rem; transform: rotate(-13deg); } .brow-right { right: 2.2rem; transform: rotate(11deg); }
.laurel { position: absolute; width: 5rem; height: 9rem; border-left: .45rem dotted var(--lime); border-radius: 50%; left: .8rem; top: 1rem; transform: rotate(-24deg); }

.floating-phrase, .neon-caption, .story-sticker, .comb { position: absolute; font-family: var(--syrup); border-radius: 999px; padding: .65rem 1.1rem; background: var(--pink); color: var(--void); box-shadow: 0 0 22px rgba(255,45,170,.65); transform: rotate(5deg); }
.phrase-one { right: 30vw; top: 12vh; } .phrase-two { left: 13vw; bottom: 20vh; background: var(--lime); }
.punctuation.cloud { position: absolute; right: 5vw; top: 10vh; font-family: var(--display); font-size: 7rem; color: var(--cyan); opacity: .75; animation: bob 3.2s ease-in-out infinite; }

.speech-bubble { position: absolute; left: 33vw; top: 38vh; max-width: 26rem; border: 0; border-radius: 2rem 2rem 2rem .4rem; padding: 1.5rem 1.8rem; background: linear-gradient(135deg, rgba(255,45,170,.95), rgba(122,60,255,.95)); box-shadow: 0 0 36px rgba(255,45,170,.65); font-family: var(--display); font-size: 1.15rem; cursor: pointer; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.speech-bubble:hover, .speech-bubble.cooling { transform: scale(1.08) rotate(-2deg); background: linear-gradient(135deg, var(--cherry), var(--pink)); }
.speech-bubble.cooled { background: linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow: 0 0 38px rgba(29,247,255,.75); color: var(--void); }
.cool-line { left: 1.5rem; right: 1.5rem; bottom: .85rem; height: .32rem; transform: scaleX(0); background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.speech-bubble.cooled .cool-line { animation: drawLine .75s ease both; }
.spark-bits i { position: absolute; width: .7rem; height: .7rem; background: var(--cherry); border-radius: 50%; box-shadow: 0 0 18px var(--cherry); animation: fizz 1.8s ease-in-out infinite; }
.spark-bits i:nth-child(1){left:30vw;top:25vh}.spark-bits i:nth-child(2){left:59vw;top:30vh;animation-delay:-.3s}.spark-bits i:nth-child(3){left:50vw;top:61vh;animation-delay:-.7s}.spark-bits i:nth-child(4){left:22vw;top:70vh;animation-delay:-1s}.spark-bits i:nth-child(5){left:68vw;top:51vh;animation-delay:-1.2s}
.marble-hand { position: absolute; right: 12vw; bottom: 18vh; width: 12rem; height: 7rem; border-radius: 50% 30% 30% 50%; background: linear-gradient(135deg, var(--cream), #a99b87); }
.marble-hand span { position: absolute; width: 7rem; height: 1.3rem; right: -4rem; top: 1.5rem; background: var(--cream); border-radius: 999px; }
.neon-caption { right: 9vw; top: 24vh; background: var(--cyan); font-size: 1rem; }

.ellipsis-bridge { position: absolute; left: 10vw; top: 35vh; display: flex; gap: 2.3rem; }
.ellipsis-bridge span { width: 5rem; height: 5rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 30px var(--cyan); animation: dotBreathe 2.2s ease-in-out infinite; }
.ellipsis-bridge span:nth-child(2){animation-delay:.25s}.ellipsis-bridge span:nth-child(3){animation-delay:.5s}
.ellipsis-bridge.expanded span { transform: scale(1.45); background: var(--lime); }
.column-stack { position: absolute; left: 18vw; bottom: 15vh; display: flex; gap: 1rem; align-items: end; }
.column-stack div { width: 4rem; background: linear-gradient(var(--cream), #958773); border-radius: .7rem .7rem .2rem .2rem; box-shadow: inset 0 0 20px rgba(21,11,46,.25); }
.column-stack div:nth-child(1){height:10rem}.column-stack div:nth-child(2){height:15rem}.column-stack div:nth-child(3){height:7rem}
.story-sticker { left: 47vw; top: 27vh; border: 0; background: var(--lime); cursor: pointer; }
.story-sticker.breathed { background: var(--cyan); box-shadow: 0 0 32px rgba(29,247,255,.8); }

.rewrite-card { position: absolute; right: 12vw; bottom: 18vh; width: min(33rem, 42vw); padding: 1.6rem; border-radius: 2rem; background: rgba(241,231,208,.1); border: 1px solid rgba(241,231,208,.22); }
.receipt { position: relative; margin: 1rem 0; padding: 1rem; border-radius: .9rem; font-family: var(--display); background: rgba(8,6,18,.72); }
.receipt span { display: block; font-family: var(--mono); color: var(--lime); font-size: .72rem; margin-bottom: .35rem; }
.receipt.bad { color: var(--cherry); } .receipt.good { color: var(--cyan); opacity: .45; transition: opacity .4s ease, transform .4s ease; }
.rewrite-card.rewritten .receipt.good { opacity: 1; transform: translateX(1rem); }
.underline-loop { left: 2rem; right: 2rem; top: 50%; height: .35rem; transform: scaleX(0); background: var(--pink); }
.rewrite-card.rewritten .underline-loop { animation: loopLine .8s ease both; }
.comb { right: 27vw; top: 24vh; border: 0; background: var(--lime); cursor: pointer; }

.witness-row { position: absolute; left: 7vw; bottom: 15vh; display: flex; gap: 3vw; align-items: end; }
.mini-bust { position: relative; width: 11rem; height: 19rem; }
.mini-bust span { position: absolute; left: 2.1rem; top: 0; width: 7rem; height: 7.8rem; border-radius: 48%; background: linear-gradient(135deg, #fff8e7, var(--cream), #a99b87); }
.mini-bust b { position: absolute; left: 3.5rem; top: 7.5rem; width: 4.2rem; height: 5.5rem; background: var(--cream); }
.mini-bust::after { content: ""; position: absolute; left: .6rem; bottom: 0; width: 10rem; height: 6rem; border-radius: .7rem; background: linear-gradient(135deg, var(--cream), #9f927d); }
.mini-bust em { position: absolute; z-index: 2; top: 5.2rem; right: -.8rem; font-family: var(--syrup); color: var(--void); background: var(--cyan); border-radius: 999px; padding: .3rem .7rem; font-style: normal; }
.mini-bust.tall { height: 23rem; }
.mini-bust.tall span { top: 1rem; }

.landing-orbit { position: absolute; right: 14vw; top: 20vh; width: 24rem; height: 24rem; border: 1px dashed rgba(29,247,255,.45); border-radius: 50%; animation: spin 16s linear infinite; }
.landing-orbit span { position: absolute; font-family: var(--display); color: var(--cyan); text-shadow: 0 0 18px var(--cyan); }
.landing-orbit span:nth-child(1){left:50%;top:-1rem}.landing-orbit span:nth-child(2){right:-1rem;top:45%}.landing-orbit span:nth-child(3){left:45%;bottom:-1.5rem}.landing-orbit span:nth-child(4){left:-1rem;top:42%;color:var(--lime)}
.soft-plinth { right: 15vw; bottom: 17vh; width: 22rem; padding: 2.4rem 1rem; font-size: 1.6rem; }

.punct-nav { position: fixed; z-index: 5; left: 50%; bottom: 4vh; transform: translateX(-50%); display: flex; gap: .75rem; padding: .6rem .8rem; border-radius: 999px; background: rgba(8,6,18,.72); border: 1px solid rgba(29,247,255,.25); box-shadow: 0 0 24px rgba(29,247,255,.22); }
.punct-nav button { width: 2.4rem; height: 2.4rem; border: 1px solid rgba(241,231,208,.2); border-radius: 50%; background: var(--grape); font-family: var(--display); color: var(--cyan); cursor: pointer; transition: .25s ease; }
.punct-nav button.active { color: var(--void); background: var(--lime); box-shadow: 0 0 18px var(--lime); transform: translateY(-.35rem); }

@keyframes drift { to { transform: translate3d(4vw, -3vh, 0) scale(1.12); } }
@keyframes railPulse { 50% { transform: translateX(170%); opacity: .45; } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bob { 50% { transform: translateY(1rem) rotate(-4deg); } }
@keyframes fizz { 50% { transform: translateY(-1.4rem) scale(1.6); background: var(--pink); } }
@keyframes dotBreathe { 50% { transform: scale(1.3); box-shadow: 0 0 50px var(--cyan); } }
@keyframes loopLine { 0% { transform: scaleX(0); border-radius: 999px; } 70% { transform: scaleX(1); } 100% { transform: scaleX(1); box-shadow: 0 0 28px var(--cyan); background: var(--cyan); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .side-gallery { padding: 0 4vw; gap: 4vw; }
  .panel { flex-basis: 94vw; min-width: 94vw; padding: 6vh 4vw; }
  h1 { font-size: 4.8rem; }
  h2 { font-size: 3.3rem; }
  .hero-bust { right: 2vw; transform: scale(.72); transform-origin: bottom right; }
  .placard, .hero-copy, .stagger.high, .stagger.low, .stagger.mid, .final-card { left: 5vw; right: auto; top: 9vh; max-width: 84vw; }
  .speech-bubble, .rewrite-card, .ellipsis-bridge, .witness-row, .landing-orbit, .soft-plinth { transform: scale(.75); transform-origin: center; }
  .speech-bubble { left: 10vw; top: 50vh; }
  .rewrite-card { left: 3vw; right: auto; bottom: 12vh; width: 88vw; }
}