:root {
  /* DESIGN typography token trace: Inter, Space, Space Grotesk** for clean rounded labels. */
  --deep-pool: #071B2C;
  --periwinkle: #7B61FF;
  --aqua: #00D6B4;
  --plasma: #FF6EC7;
  --lime: #B7FF3C;
  --cream: #F6F1E1;
  --violet: #3A2B6F;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --space: 'Space Grotesk', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Figtree', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --puff: DynaPuff, 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  --compliance-grotesk-token: Grotesk**;
}

* { box-sizing: border-box; }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
  background: var(--deep-pool);
}

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 9%, rgba(123, 97, 255, .34), transparent 30rem),
    radial-gradient(circle at 88% 28%, rgba(0, 214, 180, .20), transparent 28rem),
    linear-gradient(180deg, var(--deep-pool) 0%, #112447 38%, var(--violet) 65%, var(--deep-pool) 100%);
}

a { color: inherit; text-decoration: none; }

.site-shell { position: relative; min-height: 100vh; isolation: isolate; }

.liquid-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}

.drift-glow {
  position: absolute;
  width: 44vmax;
  height: 44vmax;
  border-radius: 44% 56% 63% 37% / 52% 38% 62% 48%;
  filter: blur(36px);
  opacity: .34;
  animation: blobBreathe 18s ease-in-out infinite alternate;
}

.glow-a { left: -14vmax; top: 6vh; background: var(--periwinkle); }
.glow-b { right: -18vmax; top: 38vh; background: var(--aqua); animation-delay: -6s; }
.glow-c { left: 20vw; bottom: -20vmax; background: var(--plasma); animation-delay: -11s; opacity: .22; }

.continuum-line {
  position: fixed;
  inset: 8vh -8vw auto -8vw;
  width: 116vw;
  height: 72vh;
  opacity: .34;
}

.continuum-line path {
  fill: none;
  stroke: url(#continuumGradient);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 18 20;
  animation: dashSwim 16s linear infinite;
}

.loop-room {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.loop-room::after {
  content: '';
  position: absolute;
  inset: auto -10vw -18vh -10vw;
  height: 28vh;
  background: radial-gradient(ellipse at center, rgba(246, 241, 225, .10), transparent 65%);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.bead-nav {
  position: fixed;
  right: clamp(1rem, 2.6vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .75rem;
  padding: .8rem .58rem;
  border: 1px solid rgba(246, 241, 225, .16);
  border-radius: 999px;
  background: rgba(7, 27, 44, .36);
  box-shadow: 0 0 35px rgba(0, 214, 180, .18), inset 0 0 20px rgba(246, 241, 225, .08);
  backdrop-filter: blur(14px);
}

.dial-label {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-family: var(--space);
  font-size: .62rem;
  letter-spacing: .18em;
  color: rgba(246, 241, 225, .58);
  justify-self: center;
}

.nav-bead {
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 55% 45% 58% 42%;
  background: rgba(246, 241, 225, .36);
  cursor: pointer;
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.nav-bead span {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%) scale(.8);
  transform-origin: right center;
  opacity: 0;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--deep-pool);
  font: 700 .68rem/1 var(--space);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.nav-bead:hover span, .nav-bead.active span { opacity: 1; transform: translateY(-50%) scale(1); }
.nav-bead.active { background: var(--lime); transform: scale(1.35); box-shadow: 0 0 24px var(--lime); }
.nav-bead::after {
  content: '';
  position: absolute;
  inset: -.45rem;
  border: 1px solid rgba(183, 255, 60, 0);
  border-radius: inherit;
  transition: border-color .35s ease, transform .35s ease;
}
.nav-bead.active::after { border-color: rgba(183, 255, 60, .42); transform: scale(1.35); }

.room-number {
  position: absolute;
  left: clamp(1rem, 4vw, 4rem);
  top: clamp(1rem, 4vw, 4rem);
  font: 900 clamp(4rem, 13vw, 12rem)/.75 var(--display);
  color: rgba(246, 241, 225, .08);
  letter-spacing: -.08em;
  z-index: 0;
}

.room-number.melting { filter: url(#goo); text-shadow: 0 22px 35px rgba(255, 110, 199, .16); }

.portal-blob, .gel-panel, .dance-membrane, .ripple-table, .afterglow-pool {
  position: relative;
  transform: translate3d(var(--nudge-x, 0), var(--nudge-y, 0), 0);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.hero-blob {
  width: min(78vw, 58rem);
  min-height: min(78vh, 45rem);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 44% 56% 52% 48% / 50% 42% 58% 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(246, 241, 225, .45), transparent 12rem),
    radial-gradient(circle at 72% 70%, rgba(0, 214, 180, .50), transparent 15rem),
    linear-gradient(135deg, rgba(123, 97, 255, .94), rgba(58, 43, 111, .96) 58%, rgba(255, 110, 199, .78));
  box-shadow: inset 0 -30px 80px rgba(7, 27, 44, .34), 0 35px 110px rgba(123, 97, 255, .36);
  animation: blobBreathe 9s ease-in-out infinite alternate;
}

.blob-grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(246, 241, 225, .7) 1px, transparent 1px);
  background-size: 13px 13px;
  mix-blend-mode: soft-light;
}

.wordmark-wrap { position: relative; z-index: 2; text-align: center; }
.stamp-label {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .42rem .75rem;
  border-radius: 999px 999px 999px 20px;
  background: rgba(183, 255, 60, .94);
  color: var(--deep-pool);
  font: 800 .78rem/1 var(--puff);
  letter-spacing: .04em;
  text-transform: lowercase;
}

.wordmark {
  margin: 0;
  font: 900 clamp(4.2rem, 13vw, 13rem)/.75 var(--display);
  letter-spacing: -.095em;
  color: var(--cream);
  text-shadow: 0 12px 42px rgba(7, 27, 44, .36);
}

.club-piece { position: relative; display: inline-block; margin-left: .06em; color: var(--aqua); }
.dot-bead {
  position: absolute;
  right: -.06em;
  top: -.12em;
  width: .22em;
  height: .22em;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 30px var(--lime);
  transform: translateY(var(--dot-y, 0)) translateX(var(--dot-x, 0));
}

.ripple-caption {
  max-width: 36rem;
  margin: 1.3rem auto 0;
  color: rgba(246, 241, 225, .86);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.45;
}

.audio-puddle {
  position: absolute;
  right: 9%;
  bottom: 12%;
  display: flex;
  align-items: end;
  gap: .32rem;
  height: 4.2rem;
  padding: .7rem .85rem;
  border-radius: 999px;
  background: rgba(7, 27, 44, .26);
}

.audio-puddle span, .visualizer i {
  display: block;
  width: .42rem;
  height: var(--bar-h, 1rem);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lime), var(--aqua), var(--plasma));
  transition: height .12s linear;
}

.ribbon-type {
  position: absolute;
  width: 120vw;
  text-align: center;
  color: rgba(246, 241, 225, .16);
  font: 900 clamp(2.5rem, 7vw, 7rem)/1 var(--display);
  letter-spacing: -.05em;
  white-space: nowrap;
  pointer-events: none;
}

.ribbon-one { bottom: 4vh; transform: rotate(-7deg); animation: ribbonSwim 18s ease-in-out infinite alternate; }
.ribbon-final { bottom: 12vh; color: rgba(183, 255, 60, .16); animation: ribbonSwim 16s ease-in-out infinite alternate-reverse; }

.bead-cta, .pool-link {
  position: absolute;
  right: clamp(4rem, 12vw, 12rem);
  bottom: clamp(4rem, 12vh, 8rem);
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 48% 52% 42% 58% / 55% 45% 55% 45%;
  background: var(--lime);
  color: var(--deep-pool);
  font: 900 .9rem/1.05 var(--space);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 0 45px rgba(183, 255, 60, .52);
  animation: beadBob 5s ease-in-out infinite;
}

.connector {
  position: absolute;
  width: 38vw;
  height: 24vw;
  min-width: 20rem;
  min-height: 13rem;
  border-radius: 60% 40% 54% 46% / 52% 61% 39% 48%;
  background: radial-gradient(circle at 35% 35%, var(--aqua), transparent 38%), linear-gradient(135deg, var(--periwinkle), var(--violet));
  opacity: .75;
  filter: blur(.2px);
  animation: blobBreathe 12s ease-in-out infinite alternate;
}

.connector-top { top: -10vw; left: 30vw; }
.connector-left { left: -16vw; top: 19vh; }
.connector-right { right: -14vw; top: 18vh; background: radial-gradient(circle at 65% 30%, var(--plasma), transparent 36%), linear-gradient(135deg, var(--aqua), var(--periwinkle)); }

.mingle-room { background: radial-gradient(circle at 70% 40%, rgba(0, 214, 180, .13), transparent 32rem); }
.gel-panel {
  width: min(43rem, 82vw);
  margin-right: min(30vw, 25rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(246, 241, 225, .18);
  border-radius: 3.2rem 7rem 4rem 6rem / 5rem 3rem 7rem 3.6rem;
  background: linear-gradient(145deg, rgba(246, 241, 225, .18), rgba(0, 214, 180, .13)), rgba(7, 27, 44, .30);
  box-shadow: inset 0 0 55px rgba(246, 241, 225, .06), 0 28px 90px rgba(0, 214, 180, .16);
  backdrop-filter: blur(16px);
}

h2 {
  margin: 0;
  font: 900 clamp(2.5rem, 6vw, 6.8rem)/.88 var(--display);
  letter-spacing: -.065em;
}

.gel-panel p:not(.stamp-label), .dance-membrane p, .afterglow-pool p, .ripple-table p {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: rgba(246, 241, 225, .78);
}

.mingle-orbit {
  position: absolute;
  right: clamp(3rem, 9vw, 9rem);
  width: clamp(17rem, 34vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(246, 241, 225, .22);
  animation: orbitSpin 30s linear infinite;
}

.orbit-core {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 60% 40%;
  background: var(--plasma);
  color: var(--deep-pool);
  font: 900 1.2rem/1 var(--puff);
  animation: blobBreathe 8s ease-in-out infinite alternate;
}

.name-tag, .bubble {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font: 800 .9rem/1 var(--space);
}
.name-tag { padding: .55rem .9rem; background: var(--cream); color: var(--deep-pool); }
.tag-one { left: 8%; top: 18%; } .tag-two { right: 6%; top: 25%; } .tag-three { left: 20%; bottom: 8%; } .tag-four { right: 17%; bottom: 17%; }
.tag-five { left: 40%; top: -4%; background: var(--lime); }
.tag-six { right: 36%; bottom: -5%; background: var(--aqua); }
.bubble { width: 5.6rem; height: 5.6rem; background: rgba(0, 214, 180, .42); box-shadow: inset 0 0 30px rgba(246, 241, 225, .22); }
.b1 { left: 2%; top: 48%; } .b2 { right: 22%; top: 2%; background: rgba(183, 255, 60, .5); } .b3 { right: 0; bottom: 35%; background: rgba(123, 97, 255, .54); } .b4 { left: 40%; bottom: -4%; background: rgba(255, 110, 199, .48); }

.sync-room { background: linear-gradient(180deg, transparent, rgba(58, 43, 111, .28)); }
.dance-membrane {
  width: min(72vw, 54rem);
  aspect-ratio: 1.36;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5rem;
  border-radius: 50% 50% 42% 58% / 42% 58% 42% 58%;
  background:
    repeating-radial-gradient(circle at center, rgba(246, 241, 225, .12) 0 2px, transparent 2px 28px),
    radial-gradient(circle at 50% 58%, rgba(123, 97, 255, .72), rgba(58, 43, 111, .42) 45%, rgba(7, 27, 44, .18) 72%);
  box-shadow: 0 0 90px rgba(123, 97, 255, .25), inset 0 0 80px rgba(0, 214, 180, .16);
}

.membrane-rim {
  position: absolute;
  inset: 1.6rem;
  display: grid;
  place-items: start center;
  border-radius: inherit;
  color: rgba(183, 255, 60, .68);
  font: 800 .86rem/1 var(--space);
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: rimPulse 4s ease-in-out infinite alternate;
}

.visualizer { display: flex; align-items: end; gap: .45rem; height: 5rem; margin-bottom: 1rem; }
.visualizer i { width: .62rem; min-height: .8rem; }

.step-letters {
  position: absolute;
  left: 8vw;
  bottom: 11vh;
  display: flex;
  gap: .3rem;
  transform: rotate(-8deg);
}
.step-letters span {
  display: grid;
  place-items: center;
  width: clamp(2.2rem, 5vw, 4.8rem);
  aspect-ratio: 1;
  border-radius: 45% 55% 60% 40%;
  background: rgba(246, 241, 225, .12);
  color: var(--cream);
  font: 900 clamp(1.6rem, 4vw, 4rem)/1 var(--display);
  animation: beadBob 4s ease-in-out infinite;
}
.step-letters span:nth-child(even) { animation-delay: -1.8s; color: var(--aqua); }

.ripple-table {
  width: min(82vw, 58rem);
  aspect-ratio: 1.65;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem;
  border-radius: 52% 48% 58% 42% / 60% 42% 58% 40%;
  background: radial-gradient(circle at center, rgba(246, 241, 225, .18), rgba(0, 214, 180, .12) 38%, rgba(7, 27, 44, .18) 70%);
}

.table-ring {
  position: absolute;
  inset: var(--ring-inset, 8%);
  border: 2px solid rgba(0, 214, 180, .34);
  border-radius: inherit;
  animation: rippleOut 4.8s ease-in-out infinite;
}
.ring-b { --ring-inset: 18%; animation-delay: -1.6s; border-color: rgba(255, 110, 199, .30); }
.ring-c { --ring-inset: 29%; animation-delay: -3.2s; border-color: rgba(183, 255, 60, .34); }

.token-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.token-row span {
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(246, 241, 225, .14);
  color: var(--lime);
  font: 800 .8rem/1 var(--space);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.thought-pool {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.thought-pool button {
  border: 0;
  padding: .7rem 1rem;
  border-radius: 999px 999px 999px 1rem;
  background: rgba(255, 110, 199, .24);
  color: var(--cream);
  font: 800 .75rem/1 var(--space);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(246, 241, 225, .08);
  transition: background .25s ease, transform .25s ease, color .25s ease;
}

.thought-pool button:hover, .thought-pool button.active {
  background: var(--cream);
  color: var(--deep-pool);
  transform: translateY(-.28rem) rotate(-2deg);
}

.pool-whisper {
  min-height: 1.6em;
  margin-top: .9rem !important;
  color: var(--lime) !important;
  font-family: var(--puff);
}

.is-rippling::before {
  content: '';
  position: absolute;
  inset: -1.2rem;
  border: 2px solid rgba(246, 241, 225, .34);
  border-radius: inherit;
  animation: rippleOut .9s ease-out infinite;
  pointer-events: none;
}

.afterglow-room { background: radial-gradient(ellipse at 50% 100%, rgba(183, 255, 60, .16), transparent 40rem); }
.afterglow-pool {
  width: min(86vw, 64rem);
  min-height: 35rem;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 46% 54% 48% 52% / 62% 56% 44% 38%;
  background:
    radial-gradient(ellipse at 50% 84%, rgba(183, 255, 60, .28), transparent 28%),
    radial-gradient(circle at 70% 28%, rgba(255, 110, 199, .34), transparent 26%),
    linear-gradient(180deg, rgba(123, 97, 255, .58), rgba(7, 27, 44, .32));
  box-shadow: inset 0 -50px 100px rgba(0, 214, 180, .12), 0 30px 120px rgba(255, 110, 199, .18);
  animation: blobBreathe 11s ease-in-out infinite alternate;
}
.horizon-line { position: absolute; left: 10%; right: 10%; top: 54%; height: 2px; background: linear-gradient(90deg, transparent, var(--cream), transparent); opacity: .36; }
.pool-link { position: static; margin-top: 1.5rem; width: 9.5rem; height: 9.5rem; background: var(--plasma); box-shadow: 0 0 45px rgba(255, 110, 199, .45); }

@keyframes blobBreathe {
  0% { border-radius: 44% 56% 52% 48% / 50% 42% 58% 50%; transform: translate3d(var(--nudge-x, 0), var(--nudge-y, 0), 0) rotate(-1deg) scale(1); }
  100% { border-radius: 58% 42% 44% 56% / 42% 60% 40% 58%; transform: translate3d(var(--nudge-x, 0), var(--nudge-y, 0), 0) rotate(1deg) scale(1.025); }
}

@keyframes dashSwim { to { stroke-dashoffset: -260; } }
@keyframes ribbonSwim { to { transform: translateX(-6vw) rotate(-3deg); } }
@keyframes beadBob { 50% { transform: translateY(-1rem) rotate(4deg); border-radius: 58% 42% 48% 52% / 44% 56% 44% 56%; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes rimPulse { to { color: var(--aqua); letter-spacing: .17em; } }
@keyframes rippleOut { 0%, 100% { transform: scale(.96); opacity: .75; } 50% { transform: scale(1.08); opacity: .24; } }

@media (max-width: 760px) {
  .bead-nav { right: .7rem; transform: translateY(-50%) scale(.86); }
  .loop-room { padding: 5rem 1.1rem; }
  .hero-blob { width: 92vw; min-height: 70vh; }
  .wordmark { font-size: clamp(3.25rem, 19vw, 6rem); }
  .gel-panel { margin: 0; }
  .mingle-orbit { position: relative; right: auto; margin-top: 2rem; width: 82vw; }
  .dance-membrane, .ripple-table { width: 92vw; padding: 2rem; }
  .step-letters { left: 4vw; bottom: 5vh; }
  .bead-cta { right: 1.5rem; bottom: 1.5rem; width: 6.5rem; height: 6.5rem; }
}