:root {
  /* Space Grotesk Grotesk** Grotesk\*\* for compact sci-fi HUD coordinates is represented with local Space fallbacks plus Poiret One. */
  --pink-soft: #FFB8D7;
  --mint: #9FFFE0;
  --lavender: #C9B6FF;
  --void: #17142B;
  --dusk: #2C1B46;
  --white: #F8F4FF;
  --cream: #FFF0A8;
  --peach: #FFD1A6;
  --sky: #8FD8FF;
  --hot-pink: #FF4FA3;
  --rim: linear-gradient(120deg, #FFB8D7, #9FFFE0, #C9B6FF, #FFD1A6, #8FD8FF, #FF4FA3, #FFB8D7);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: #2C1B46; color: #F8F4FF; }

body {
  font-family: "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.font-compliance { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; font-family: "Grotesk**", "Space Grotesk", sans-serif; }
.font-compliance::before { content: "Grotesk**"; }

button { font: inherit; color: inherit; }

.planetarium { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 110%, rgba(255,79,163,.38), transparent 36%), radial-gradient(circle at 20% 5%, rgba(201,182,255,.34), transparent 34%), linear-gradient(145deg, #2C1B46 0%, #171025 64%, #2C1B46 100%); }
.planetarium::before { content: ""; position: absolute; inset: -15%; background: repeating-conic-gradient(from 12deg at 50% 48%, rgba(248,244,255,.06) 0 2deg, transparent 2deg 13deg); opacity: .42; animation: planetSpin 28s linear infinite; }
.starfield { position: absolute; inset: 0; background-image: radial-gradient(#F8F4FF 1px, transparent 1px), radial-gradient(#9FFFE0 1px, transparent 1px); background-size: 42px 42px, 67px 67px; background-position: 0 0, 12px 18px; opacity: .24; }
.bokeh { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .72; mix-blend-mode: screen; animation: floatBokeh 9s ease-in-out infinite alternate; }
.bokeh-a { width: 30vw; height: 30vw; left: 4vw; top: 13vh; background: #FFB8D7; }
.bokeh-b { width: 24vw; height: 24vw; right: 8vw; top: 7vh; background: #9FFFE0; animation-delay: -2s; }
.bokeh-c { width: 34vw; height: 34vw; right: 16vw; bottom: -7vw; background: #C9B6FF; animation-delay: -4s; }
.bokeh-d { width: 18vw; height: 18vw; left: 36vw; bottom: 10vh; background: #FFD1A6; animation-delay: -6s; }

.ballroom-shell { position: relative; z-index: 2; display: flex; width: 500vw; height: 100vh; transform: translate3d(0,0,0); transition: transform 900ms cubic-bezier(.18,.9,.12,1); }
.stage { position: relative; flex: 0 0 100vw; width: 100vw; height: 100vh; padding: clamp(28px, 5vw, 72px); overflow: hidden; }
.stage::after { content: ""; position: absolute; inset: 3.2vw; border-radius: 48px; border: 2px solid rgba(248,244,255,.12); box-shadow: inset 0 0 60px rgba(255,184,215,.08); pointer-events: none; }

.orbit-label { position: relative; z-index: 4; margin: 0 0 22px; font-family: "Space Grotesk", "Poiret One", space, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #9FFFE0; font-size: clamp(13px, 1.2vw, 18px); text-shadow: 0 0 16px rgba(159,255,224,.7); }
.wordmark, h2 { position: relative; z-index: 4; margin: 0; font-family: Limelight, Space, Georgia, serif; font-weight: 400; text-transform: uppercase; }
.wordmark { display: flex; flex-wrap: wrap; max-width: 92vw; gap: .01em; font-size: clamp(48px, 11vw, 170px); line-height: .88; letter-spacing: .03em; color: #F8F4FF; text-shadow: 0 6px 0 #FF4FA3, 0 13px 0 rgba(143,216,255,.48), 0 0 38px rgba(255,184,215,.74); }
.wordmark span { display: inline-block; transform: scale(.22); opacity: 0; filter: blur(9px); animation: inflateLetter 800ms cubic-bezier(.2,1.5,.25,1) forwards; animation-delay: calc(var(--letter, 0) * 80ms); }
.wordmark.pumped span { animation: pumpPop 620ms cubic-bezier(.18,1.7,.24,1) forwards; animation-delay: calc(var(--letter, 0) * 34ms); }
.opening-copy { position: relative; z-index: 4; max-width: 720px; margin: 28px 0; color: rgba(248,244,255,.86); font-size: clamp(18px, 2vw, 28px); line-height: 1.24; }

h2 { max-width: 900px; font-size: clamp(38px, 7vw, 112px); line-height: .94; color: #F8F4FF; text-shadow: 0 5px 0 rgba(255,79,163,.72), 0 0 32px rgba(201,182,255,.55); }
.scene-heading { position: relative; z-index: 4; max-width: 950px; }
.center-heading { margin: 0 auto; text-align: center; }

.hud-ring { position: absolute; z-index: 2; right: 5vw; top: 7vh; width: min(56vw, 640px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 43%, rgba(159,255,224,.12) 44% 46%, transparent 47%), conic-gradient(from var(--spin, 0deg), #FFB8D7, #9FFFE0, #C9B6FF, #FFD1A6, #8FD8FF, #FF4FA3, #FFB8D7); mask: radial-gradient(circle, transparent 47%, #000 48% 50%, transparent 51% 61%, #000 62% 63%, transparent 64%); opacity: .82; animation: rimRotate 12s linear infinite; }
.hud-ring span { position: absolute; inset: calc(9% * var(--r)); border: 1px solid rgba(248,244,255,.18); border-radius: 50%; }
.hud-ring span:nth-child(1) { --r: 1; } .hud-ring span:nth-child(2) { --r: 2; } .hud-ring span:nth-child(3) { --r: 3; } .hud-ring span:nth-child(4) { --r: 4; }

.pump-button, .final-piece, .console-key, .puzzle-puff, .inflated-block, .orbit-tile { position: relative; z-index: 5; border: 0; background: linear-gradient(145deg, rgba(255,184,215,.88), rgba(201,182,255,.9)); color: #2C1B46; box-shadow: inset -10px -12px 20px rgba(44,27,70,.18), inset 10px 12px 24px rgba(248,244,255,.42), 0 18px 50px rgba(0,0,0,.24); transition: transform 360ms cubic-bezier(.2,1.5,.26,1), filter 360ms, box-shadow 360ms; }
.pump-button { padding: 18px 30px; border-radius: 999px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.pump-button span { display: inline-block; width: 18px; height: 18px; margin-right: 12px; border-radius: 50%; background: #9FFFE0; box-shadow: 0 0 18px #9FFFE0; vertical-align: -3px; }
.pump-button:hover, .final-piece:hover, .console-key:hover, .puzzle-puff:hover, .inflated-block:hover, .orbit-tile:hover, .active-pop { transform: translateY(-10px) scale(1.05); filter: saturate(1.22) brightness(1.07); }

.dock-cloud { position: absolute; right: 8vw; bottom: 12vh; width: min(620px, 52vw); height: 330px; }
.puzzle-puff { position: absolute; min-width: 150px; min-height: 105px; padding: 24px; border-radius: 38px; font-family: "Poiret One"; font-size: 25px; letter-spacing: .12em; text-transform: uppercase; }
.puzzle-puff::before, .inflated-block::before, .orbit-tile::before, .command-panel::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--rim); background-size: 300% 300%; z-index: -1; animation: borderFlow 3.6s linear infinite; }
.puff-one { left: 0; top: 32px; clip-path: polygon(0 0, 78% 0, 78% 28%, 100% 28%, 100% 100%, 0 100%); }
.puff-two { right: 70px; top: 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 76% 78%, 76% 100%, 0 100%); }
.puff-three { left: 185px; bottom: 0; clip-path: polygon(0 20%, 24% 20%, 24% 0, 100% 0, 100% 100%, 0 100%); }

.module-wall { position: absolute; z-index: 4; left: 8vw; right: 8vw; bottom: 10vh; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 22px; }
.inflated-block { min-height: 220px; padding: 28px; border-radius: 42px; text-align: left; }
.inflated-block b { display: block; font-family: Limelight; font-size: clamp(25px, 3vw, 52px); font-weight: 400; color: #2C1B46; }
.inflated-block span { font-family: "Poiret One"; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; }
.notch-left { clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 12% 70%, 0 70%, 0 32%, 12% 32%); }
.tab-top { clip-path: polygon(0 14%, 32% 14%, 32% 0, 68% 0, 68% 14%, 100% 14%, 100% 100%, 0 100%); }
.notch-right { clip-path: polygon(0 0, 88% 0, 88% 32%, 100% 32%, 100% 70%, 88% 70%, 88% 100%, 0 100%); }
.tab-side { clip-path: polygon(0 0, 76% 0, 76% 22%, 100% 22%, 100% 58%, 76% 58%, 76% 100%, 0 100%); }
.fan-lines { position: absolute; right: 8vw; top: 18vh; width: 35vw; height: 35vw; border-radius: 50%; background: repeating-conic-gradient(from -45deg, rgba(255,209,166,.34) 0 2deg, transparent 2deg 10deg); mask: radial-gradient(circle at 50% 100%, #000 0 68%, transparent 69%); opacity: .5; }

.dance-orbit { position: absolute; z-index: 4; left: 50%; top: 54%; width: min(72vw, 740px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(248,244,255,.18); border-radius: 50%; box-shadow: inset 0 0 80px rgba(159,255,224,.1), 0 0 80px rgba(255,79,163,.16); }
.dance-orbit::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 2px dashed rgba(255,209,166,.36); animation: planetSpin 20s linear infinite reverse; }
.orbit-tile { position: absolute; width: 118px; height: 96px; border-radius: 32px; font-family: "Poiret One"; font-size: 30px; letter-spacing: .18em; }
.tile-a { left: 42%; top: -4%; } .tile-b { right: 5%; top: 24%; } .tile-c { right: 18%; bottom: 5%; } .tile-d { left: 13%; bottom: 8%; } .tile-e { left: 4%; top: 25%; }
.constellation-line { position: absolute; height: 3px; background: linear-gradient(90deg, transparent, #9FFFE0, #FFB8D7, transparent); box-shadow: 0 0 16px #9FFFE0; transform-origin: left center; opacity: .7; }
.line-one { left: 22%; top: 33%; width: 380px; transform: rotate(18deg); } .line-two { left: 24%; top: 67%; width: 330px; transform: rotate(-24deg); } .line-three { left: 47%; top: 17%; width: 250px; transform: rotate(92deg); }

.command-panel { position: absolute; z-index: 4; right: 8vw; bottom: 11vh; width: min(650px, 52vw); min-height: 390px; padding: 34px; border-radius: 54px; background: linear-gradient(145deg, rgba(248,244,255,.16), rgba(255,184,215,.12)); box-shadow: inset 0 0 40px rgba(248,244,255,.1), 0 28px 90px rgba(0,0,0,.26); }
.gauge { position: relative; width: 250px; height: 130px; margin: 0 auto 36px; border-radius: 250px 250px 0 0; overflow: hidden; border: 2px solid rgba(248,244,255,.22); background: repeating-conic-gradient(from 270deg at 50% 100%, #FFB8D7 0 10deg, #9FFFE0 10deg 20deg, #C9B6FF 20deg 30deg); }
.gauge span { position: absolute; left: 50%; bottom: 0; width: 4px; height: 112px; background: #2C1B46; transform-origin: bottom; transform: rotate(var(--needle, -50deg)); transition: transform 500ms ease; }
.gauge b { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: "Poiret One"; letter-spacing: .2em; text-transform: uppercase; color: #2C1B46; }
.readout { margin-bottom: 24px; padding: 18px; border-radius: 24px; background: rgba(44,27,70,.74); color: #9FFFE0; font-family: "Poiret One"; font-size: 25px; letter-spacing: .18em; text-align: center; box-shadow: inset 0 0 22px rgba(159,255,224,.18); }
.console-key { width: 100%; margin: 8px 0; padding: 16px 18px; border-radius: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }

.lounge { text-align: center; }
.lounge h2 { margin: 2vh auto 0; }
.final-piece { margin-top: 5vh; padding: 18px 32px; border-radius: 999px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.final-piece i { display: inline-block; width: 28px; height: 24px; margin-right: 12px; background: #9FFFE0; clip-path: polygon(0 0, 75% 0, 75% 30%, 100% 30%, 100% 100%, 0 100%); vertical-align: -6px; }
.solved-constellation { position: absolute; left: 50%; bottom: 16vh; width: 520px; height: 210px; transform: translateX(-50%); opacity: .7; }
.solved-constellation span { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #F8F4FF; box-shadow: 0 0 22px #FFB8D7, 0 0 54px #9FFFE0; transform: scale(.55); transition: 700ms cubic-bezier(.2,1.4,.25,1); }
.solved-constellation span:nth-child(1) { left: 5%; top: 54%; } .solved-constellation span:nth-child(2) { left: 22%; top: 18%; } .solved-constellation span:nth-child(3) { left: 43%; top: 62%; } .solved-constellation span:nth-child(4) { right: 32%; top: 21%; } .solved-constellation span:nth-child(5) { right: 18%; top: 48%; } .solved-constellation span:nth-child(6) { right: 5%; top: 12%; }
.lounge.solved .solved-constellation span { transform: scale(1.35); }
.final-message { position: relative; z-index: 4; margin-top: 30px; font-family: "Poiret One"; font-size: clamp(22px, 3vw, 42px); letter-spacing: .18em; text-transform: uppercase; color: #9FFFE0; opacity: 0; transform: translateY(18px); transition: 700ms ease; text-shadow: 0 0 24px #9FFFE0; }
.final-message.show { opacity: 1; transform: translateY(0); }

.scene-nav { position: fixed; z-index: 10; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 8px; padding: 10px; border-radius: 999px; background: rgba(44,27,70,.72); border: 1px solid rgba(248,244,255,.18); box-shadow: 0 18px 50px rgba(0,0,0,.26); backdrop-filter: blur(12px); }
.scene-nav button { padding: 10px 14px; border: 0; border-radius: 999px; background: transparent; color: #F8F4FF; font-family: "Poiret One"; letter-spacing: .12em; text-transform: uppercase; }
.scene-nav button.active { background: #F8F4FF; color: #2C1B46; box-shadow: 0 0 24px rgba(255,184,215,.7); }
.progress-orbit { position: fixed; z-index: 9; left: 7vw; right: 7vw; bottom: 82px; height: 3px; border-radius: 999px; background: rgba(248,244,255,.14); overflow: hidden; }
.progress-orbit span { display: block; width: 0; height: 100%; background: var(--rim); background-size: 300% 100%; animation: borderFlow 4s linear infinite; transition: width 450ms ease; }

@keyframes inflateLetter { to { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes pumpPop { 0% { transform: scale(1); } 45% { transform: scale(1.18, .86); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes borderFlow { to { background-position: 300% 0; } }
@keyframes rimRotate { to { transform: rotate(360deg); } }
@keyframes planetSpin { to { transform: rotate(360deg); } }
@keyframes floatBokeh { from { transform: translate3d(-2vw, -1vh, 0) scale(.95); } to { transform: translate3d(3vw, 2vh, 0) scale(1.08); } }

@media (max-width: 820px) {
  .stage { padding: 26px; }
  .wordmark { font-size: 15vw; }
  h2 { font-size: 12vw; }
  .dock-cloud, .command-panel { width: 88vw; right: 6vw; transform: scale(.78); transform-origin: bottom right; }
  .module-wall { grid-template-columns: repeat(2, 1fr); left: 6vw; right: 6vw; gap: 14px; }
  .inflated-block { min-height: 135px; padding: 18px; }
  .dance-orbit { width: 92vw; }
  .scene-nav button { font-size: 11px; padding: 8px 9px; }
}