:root{
  --navy:#062033;
  --deep:#0B5D78;
  --lagoon:#4ED7F1;
  --mint:#B8FFE8;
  --pearl:#F7FFF8;
  --pink:#FF8CCF;
  --lav:#B9B8FF;
  --coral:#FF6F61;
  --plum:#32163A;
  --grand:"Grandstander","Cooper Black","Arial Rounded MT Bold",system-ui,sans-serif;
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--pearl);font-family:var(--round);background:linear-gradient(180deg,var(--navy),var(--deep) 38%,var(--navy));}
a{color:inherit;text-decoration:none}
.liquid-filters{position:absolute;width:0;height:0;overflow:hidden}
.caustic-field{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.35;background:radial-gradient(ellipse at 20% 10%,rgba(78,215,241,.42),transparent 28%),radial-gradient(ellipse at 80% 35%,rgba(185,184,255,.34),transparent 32%),repeating-linear-gradient(115deg,transparent 0 24px,rgba(247,255,248,.08) 25px 27px,transparent 28px 52px);filter:url(#mist-wobble) blur(.5px);animation:caustic 24s ease-in-out infinite alternate;}
@keyframes caustic{from{transform:translate3d(-2%,0,0) rotate(-2deg) scale(1)}to{transform:translate3d(3%,2%,0) rotate(3deg) scale(1.08)}}

.bubble-nav{position:fixed;left:clamp(14px,3vw,42px);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:16px;align-items:center;}
.bubble-nav:before{content:"";position:absolute;top:-30px;bottom:-30px;width:2px;background:linear-gradient(transparent,rgba(184,255,232,.45),transparent);filter:blur(.3px)}
.nav-bubble{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--pearl);font:700 12px var(--mono);background:radial-gradient(circle at 30% 22%,rgba(247,255,248,.95),rgba(184,255,232,.45) 22%,rgba(78,215,241,.18) 54%,rgba(6,32,51,.28));border:1px solid rgba(247,255,248,.55);box-shadow:inset -12px -14px 24px rgba(50,22,58,.28),inset 8px 8px 14px rgba(247,255,248,.35),0 12px 35px rgba(78,215,241,.18);backdrop-filter:blur(12px);transition:transform .45s ease,box-shadow .45s ease,width .45s ease,height .45s ease;animation:bob 5.5s ease-in-out infinite;}
.nav-bubble:nth-child(even){animation-delay:-2.2s}.nav-bubble.active{width:76px;height:76px;box-shadow:inset -16px -18px 28px rgba(50,22,58,.25),0 0 38px rgba(78,215,241,.55),0 0 0 8px rgba(185,184,255,.09)}
.nav-bubble:after{content:attr(data-room);position:absolute;left:88%;top:50%;transform:translate(10px,-50%) scale(.9);white-space:nowrap;padding:7px 12px;border-radius:999px;background:rgba(247,255,248,.15);border:1px solid rgba(247,255,248,.25);opacity:0;transition:.35s;color:var(--mint);font-family:var(--round);font-size:11px;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
.nav-bubble:hover:after,.nav-bubble.active:after{opacity:1;transform:translate(10px,-50%) scale(1)}
@keyframes bob{50%{transform:translateY(-12px) scale(1.035)}}

.renai-droplet{position:fixed;left:78px;top:14vh;width:30px;height:38px;z-index:21;border-radius:55% 55% 62% 62%;background:radial-gradient(circle at 32% 22%,var(--pearl) 0 10%,var(--mint) 11% 22%,rgba(78,215,241,.55) 45%,rgba(185,184,255,.35));box-shadow:inset -8px -10px 15px rgba(50,22,58,.3),0 0 20px rgba(255,140,207,.55);pointer-events:none;transition:top .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.renai-droplet i{position:absolute;right:7px;bottom:9px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink)}
.cursor-ripple{position:fixed;z-index:19;width:18px;height:18px;border:1px solid rgba(184,255,232,.8);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 30px rgba(78,215,241,.35)}
.cursor-ripple.pulse{animation:ripplePulse .7s ease-out}
@keyframes ripplePulse{0%{opacity:.8;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(8)}}

main{position:relative;z-index:1}.room{min-height:100vh;position:relative;overflow:hidden;padding:clamp(70px,8vw,120px) clamp(24px,7vw,100px) clamp(70px,7vw,110px) clamp(100px,12vw,190px);isolation:isolate;}
.room:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--room-bg,transparent)}
.room:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 18%,rgba(247,255,248,.15),transparent 18%),radial-gradient(circle at 12% 82%,rgba(184,255,232,.12),transparent 28%);pointer-events:none}
.mono{font-family:var(--mono);letter-spacing:.16em;font-size:11px;text-transform:uppercase;color:var(--mint)}
h1,h2{font-family:var(--grand);line-height:.92;margin:10px 0;color:var(--pearl);text-shadow:0 7px 28px rgba(50,22,58,.65)}
h1{font-size:clamp(54px,9vw,138px)}h2{font-size:clamp(38px,6.8vw,96px)}p{font-family:var(--serif);font-size:clamp(20px,2.2vw,34px);line-height:1.08;color:rgba(247,255,248,.82)}

.lagoon{--room-bg:radial-gradient(circle at 68% 42%,rgba(78,215,241,.23),transparent 35%),linear-gradient(145deg,#062033 10%,#0B5D78 58%,#32163A 130%)}
.giant-orb{position:absolute;left:clamp(75px,15vw,230px);top:7vh;width:clamp(360px,55vw,820px);height:clamp(360px,55vw,820px);border-radius:50%;background:radial-gradient(circle at 26% 22%,rgba(247,255,248,.98) 0 7%,rgba(184,255,232,.52) 8% 20%,rgba(78,215,241,.22) 42%,rgba(6,32,51,.2) 70%),linear-gradient(135deg,rgba(247,255,248,.22),rgba(185,184,255,.13),rgba(255,140,207,.18));border:1px solid rgba(247,255,248,.38);box-shadow:inset 28px 28px 55px rgba(247,255,248,.25),inset -50px -70px 90px rgba(6,32,51,.5),0 30px 100px rgba(78,215,241,.3);filter:url(#liquid-lens);animation:orbBreath 9s ease-in-out infinite alternate;}
@keyframes orbBreath{to{transform:translateY(18px) scale(1.025);border-radius:48% 52% 55% 45%}}
.membership-sticker{position:absolute;right:12%;top:37%;width:250px;min-height:128px;border-radius:34px;padding:19px 22px;transform:rotate(-8deg);background:linear-gradient(120deg,rgba(247,255,248,.76),rgba(185,184,255,.6),rgba(255,140,207,.45));border:1px solid rgba(247,255,248,.8);box-shadow:inset 0 0 20px rgba(247,255,248,.45),0 18px 35px rgba(50,22,58,.3);color:var(--plum);overflow:hidden;}
.membership-sticker:after{content:"";position:absolute;inset:-70% -40%;background:linear-gradient(100deg,transparent 40%,rgba(247,255,248,.9) 50%,transparent 60%);animation:stickerSweep 4.8s ease-in-out infinite}.membership-sticker>*{position:relative;z-index:1}.membership-sticker strong{display:block;font:800 38px var(--grand)}.membership-sticker em{font:16px var(--serif)}.tiny-label{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
@keyframes stickerSweep{0%,35%{transform:translateX(-40%)}75%,100%{transform:translateX(45%)}}
.room-caption{position:absolute;max-width:520px}.top-right{right:6vw;top:12vh}.chrome-rail{position:absolute;height:9px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--pearl),var(--lagoon),transparent);box-shadow:0 0 18px rgba(78,215,241,.5)}.rail-one{right:0;bottom:17%;width:48%;transform:rotate(-11deg)}
.oxygen-trail{position:absolute;width:130px;height:360px;background:radial-gradient(circle,var(--mint) 0 9%,transparent 10% 100%);background-size:46px 52px;opacity:.35;animation:rise 8s linear infinite}.trail-a{right:20%;bottom:-10%}.trail-b{left:16%;bottom:-5%;animation-duration:11s}@keyframes rise{to{transform:translateY(-220px)}}

.signal{--room-bg:linear-gradient(160deg,#0B5D78,#062033 60%,#32163A)}.edge-left{max-width:620px}.message-cloud{position:absolute;inset:12vh 5vw 8vh 21vw}.liquid-message{position:absolute;max-width:390px;padding:20px 28px;border-radius:999px;background:rgba(247,255,248,.14);border:1px solid rgba(184,255,232,.42);backdrop-filter:blur(18px);box-shadow:inset 0 0 28px rgba(247,255,248,.13),0 20px 55px rgba(6,32,51,.33);font-family:var(--serif);font-size:clamp(22px,2.3vw,36px);color:rgba(247,255,248,.86);filter:url(#liquid-lens);animation:floatMsg 7s ease-in-out infinite alternate}.m1{left:10%;top:18%}.m2{right:8%;top:10%;animation-delay:-2s}.m3{left:35%;top:42%;animation-delay:-4s}.m4{right:14%;bottom:16%;animation-delay:-1s}.m5{left:2%;bottom:6%;animation-delay:-3s}@keyframes floatMsg{to{transform:translate(18px,-24px) rotate(3deg);border-radius:38px 64px 52px 70px}}
.question-plant{position:absolute;bottom:-22px;font:900 240px var(--grand);color:rgba(184,255,232,.16);text-shadow:0 0 30px rgba(78,215,241,.22);animation:plantWave 6s ease-in-out infinite alternate}.plant-one{right:8%;transform:rotate(12deg)}.plant-two{left:22%;font-size:170px;animation-delay:-2s}@keyframes plantWave{to{transform:rotate(-7deg) translateY(-16px)}}
.plastic-tab{position:absolute;left:13vw;bottom:10vh;max-width:410px;padding:18px 24px;border-radius:22px;background:rgba(185,184,255,.2);border:1px solid rgba(247,255,248,.35);font-family:var(--serif);font-size:24px;color:var(--pearl);backdrop-filter:blur(14px)}

.calibration{--room-bg:radial-gradient(circle at 50% 47%,rgba(255,140,207,.16),transparent 34%),linear-gradient(130deg,#062033,#0B5D78 75%)}.calibration-core{position:absolute;left:50%;top:52%;width:min(72vw,760px);height:min(72vw,760px);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(184,255,232,.24);background:repeating-radial-gradient(circle,rgba(247,255,248,.05) 0 2px,transparent 3px 56px);animation:slowSpin 36s linear infinite}@keyframes slowSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.central-droplet{position:absolute;left:50%;top:50%;width:132px;height:158px;transform:translate(-50%,-50%);border-radius:54% 54% 62% 62%;background:radial-gradient(circle at 30% 20%,var(--pearl),var(--mint) 18%,rgba(78,215,241,.62) 48%,rgba(255,140,207,.28));box-shadow:inset -22px -30px 38px rgba(50,22,58,.3),0 0 70px rgba(78,215,241,.42)}.central-droplet span{position:absolute;right:30px;bottom:34px;width:22px;height:22px;border-radius:50%;background:var(--coral);box-shadow:0 0 28px var(--coral)}
.dial{position:absolute;width:152px;height:152px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:25px;background:radial-gradient(circle at 34% 24%,rgba(247,255,248,.78),rgba(184,255,232,.22) 31%,rgba(185,184,255,.15));border:1px solid rgba(247,255,248,.45);box-shadow:inset -18px -18px 28px rgba(6,32,51,.25),0 20px 45px rgba(6,32,51,.25);animation:counterSpin 36s linear infinite}.dial b{font:700 28px var(--mono);color:var(--pearl)}.dial small{font:700 11px var(--round);letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}@keyframes counterSpin{to{transform:rotate(-360deg)}}.dial-a{left:50%;top:-30px;margin-left:-76px}.dial-b{right:10%;top:20%}.dial-c{left:6%;top:26%}.dial-d{left:50%;bottom:-30px;margin-left:-76px}
.thermometer{position:absolute;right:2%;bottom:24%;width:44px;height:230px;border-radius:999px;background:rgba(247,255,248,.15);border:1px solid rgba(247,255,248,.45);padding:8px}.thermometer i{display:block;width:100%;height:68%;margin-top:54%;border-radius:999px;background:linear-gradient(var(--pink),var(--coral));box-shadow:0 0 25px var(--pink)}.thermometer span{position:absolute;left:55px;bottom:18px;white-space:nowrap;font:700 11px var(--mono);letter-spacing:.12em;color:var(--coral)}.lower-right{position:absolute;right:7vw;bottom:8vh;max-width:560px;text-align:right}

.confession{--room-bg:linear-gradient(180deg,#32163A,#0B5D78 44%,#062033);}.glass-elevator{position:absolute;left:22vw;top:5vh;width:48vw;min-width:320px;height:105vh;border-radius:42px;background:linear-gradient(90deg,rgba(247,255,248,.18),rgba(185,184,255,.12),rgba(255,140,207,.12));border:1px solid rgba(247,255,248,.28);box-shadow:inset 20px 0 55px rgba(247,255,248,.12),0 0 80px rgba(255,140,207,.18);backdrop-filter:blur(18px);overflow:hidden}.glass-elevator:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0 32%,rgba(247,255,248,.23) 35%,transparent 43%);animation:elevatorShine 6s ease-in-out infinite}@keyframes elevatorShine{50%{transform:translateX(45%)}}
.vellum-strip{position:absolute;left:-6%;right:-6%;padding:26px 38px;border-radius:28px;background:rgba(247,255,248,.24);border:1px solid rgba(247,255,248,.35);font:clamp(24px,3vw,44px) var(--serif);color:rgba(247,255,248,.9);backdrop-filter:blur(12px);box-shadow:0 18px 45px rgba(50,22,58,.2);animation:stripSlide 9s ease-in-out infinite alternate}.s1{top:18%;transform:rotate(-4deg)}.s2{top:44%;animation-delay:-3s;transform:rotate(3deg)}.s3{top:68%;animation-delay:-6s;transform:rotate(-2deg)}@keyframes stripSlide{to{margin-left:10%;filter:blur(.8px)}}.pink-mist{position:absolute;inset:25% -10% -15%;background:radial-gradient(ellipse at 65% 55%,rgba(255,140,207,.44),transparent 50%),radial-gradient(ellipse at 25% 70%,rgba(185,184,255,.28),transparent 45%);filter:blur(28px);animation:mist 10s ease-in-out infinite alternate}@keyframes mist{to{transform:translateY(-30px) scale(1.06)}}.atrium-title{position:absolute;right:8vw;top:13vh;max-width:560px;text-align:right}

.tide{--room-bg:linear-gradient(180deg,#062033 5%,#0B5D78 48%,#4ED7F1 130%)}.horizon-pool{position:absolute;left:9vw;right:4vw;bottom:10vh;height:48vh;border-radius:55% 45% 0 0/35% 35% 0 0;background:linear-gradient(180deg,rgba(247,255,248,.22),rgba(78,215,241,.18));border-top:1px solid rgba(247,255,248,.65);box-shadow:inset 0 30px 70px rgba(247,255,248,.1),0 -20px 80px rgba(78,215,241,.18);overflow:hidden}.ripple-field{position:absolute;width:44vw;height:44vw;border-radius:50%;border:2px solid rgba(184,255,232,.52);top:20%;animation:rippleMeet 5s ease-out infinite}.ripple-field:before,.ripple-field:after{content:"";position:absolute;inset:14%;border-radius:50%;border:inherit}.ripple-field:after{inset:30%;border-color:rgba(255,140,207,.36)}.left-ripple{left:9%}.right-ripple{right:8%;animation-delay:-2.5s}@keyframes rippleMeet{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.18);opacity:.08}}.meeting-glow{position:absolute;left:50%;top:52%;width:180px;height:180px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(247,255,248,.8),rgba(184,255,232,.35),transparent 68%);filter:blur(8px);animation:glow 4s ease-in-out infinite alternate}@keyframes glow{to{transform:translate(-50%,-50%) scale(1.45)}}
.badge-cluster{position:absolute;left:16vw;top:16vh;display:flex;gap:16px;flex-wrap:wrap;max-width:560px}.badge-cluster span{padding:13px 18px;border-radius:999px;background:linear-gradient(120deg,rgba(247,255,248,.54),rgba(185,184,255,.35),rgba(255,140,207,.28));border:1px solid rgba(247,255,248,.55);color:var(--plum);font:800 12px var(--round);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 14px 35px rgba(6,32,51,.22)}.final-copy{position:absolute;right:7vw;top:21vh;max-width:680px;text-align:right}.final-copy p{max-width:540px;margin-left:auto}

@media (max-width:760px){.room{padding-left:88px;padding-right:22px}.nav-bubble{width:44px;height:44px}.nav-bubble.active{width:58px;height:58px}.nav-bubble:after{display:none}.renai-droplet{left:56px}.top-right,.lower-right,.atrium-title,.final-copy{position:relative;right:auto;top:auto;bottom:auto;text-align:left;margin-left:0}.giant-orb{left:70px;top:20vh;width:78vw;height:78vw}.membership-sticker{width:190px;right:2%;top:28%}.membership-sticker strong{font-size:28px}.message-cloud{position:relative;inset:auto;height:70vh;margin-top:40px}.calibration-core{width:88vw;height:88vw;left:56%;}.dial{width:112px;height:112px}.glass-elevator{left:84px;width:70vw}.horizon-pool{left:88px}.badge-cluster,.final-copy{left:88px;right:20px}.final-copy{top:14vh}}