/* Four quiet, readable destinations inside suspended soap-film lenses. */
.bubble-field{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;column-gap:clamp(16px,3.2vw,56px);height:210px;bottom:48px}
.bubble-caption{top:-4px;left:0;gap:17px;color:#537086;font-size:10px}.bubble-caption>span{font-size:7px;color:#66849a;letter-spacing:.17em}
.bubble-field .bubble-item{position:relative;inset:auto;width:100%;max-width:228px;margin-inline:auto;height:184px;--float-time:8.2s;--float-delay:-2s;--rim:#7fc2e2;--rim-warm:#c5b4ed;--tint:#86bce0;--drift-x:5px;--drift-y:10px;perspective:800px}
.bubble-field .bubble-watch{--float-time:9.4s;--float-delay:-5s;--rim:#8bc7e3;--rim-warm:#e7b6a0;--tint:#d2bba3;top:-10px}
.bubble-field .bubble-guide{--float-time:8.8s;--float-delay:-3.4s;--rim:#82cfda;--rim-warm:#b5c9ef;--tint:#93c9d4;top:1px}
.bubble-field .bubble-vrchat{--float-time:10.1s;--float-delay:-6.8s;--rim:#a2b2e8;--rim-warm:#e7b9d1;--tint:#b0b2dc;top:-8px}
.bubble-field .bubble-link{position:absolute;inset:0;display:block;border-radius:50%;animation:none;color:#244459;outline-offset:5px;isolation:isolate}
.bubble-sphere{position:absolute;inset:4px 1px 9px;display:grid;place-items:center;border-radius:49% 51% 50% 50% / 48% 49% 51% 52%;isolation:isolate;animation:gateway-float var(--float-time) ease-in-out var(--float-delay) infinite;transition:scale .35s cubic-bezier(.2,.8,.2,1)}
.bubble-field .bubble-film{inset:0;border:1px solid #ffffffd9;backdrop-filter:none;background:radial-gradient(ellipse at 48% 43%,#ffffffbd 0%,#f6fcff75 39%,transparent 66%),radial-gradient(ellipse at 72% 78%,#d9ecf77a 15%,#e6f3fa42 48%,transparent 74%),linear-gradient(140deg,#ffffff85,#edf7fb26 47%,#cfdeec3d);box-shadow:inset 0 1px 2px #fff,inset 4px 1px 12px #ffffffab,inset -3px -9px 16px #78a9c229,0 12px 23px -18px #355d7d7a,0 0 0 1px #88abc419;transform:none!important}
.bubble-field .bubble-film:before{inset:-1px;padding:1.5px;background:conic-gradient(from 21deg,#fff 0%,var(--rim) 15%,#f6fbff88 24%,#d2bce48c 34%,var(--rim-warm) 43%,#fff 52%,#b0dddf 63%,#a3bfe1aa 73%,#fff9 84%,#fff 100%);opacity:.85}
.bubble-field .bubble-film:after{inset:5px 8px 6px;border:1px solid transparent;border-bottom-color:#ffffffed;border-right-color:#9cb8d64d;box-shadow:inset -1px -3px 5px #fff9,0 2px 4px #96aac91c;transform:rotate(-8deg)}
.bubble-field .bubble-reflection{inset:0;border-radius:inherit}
.bubble-field .bubble-reflection:before{width:56%;height:29%;left:8%;top:8%;border:0;background:radial-gradient(ellipse at 50% 0%,#fff 0%,#ffffffd6 13%,#ffffff38 35%,transparent 61%);transform:rotate(-27deg);filter:none;opacity:.96}
.bubble-field .bubble-reflection:after{width:43%;height:18%;right:6%;bottom:6%;border-bottom:2px solid #ffffffeb;border-top:0;box-shadow:0 4px 7px -4px var(--rim-warm);transform:rotate(-30deg);opacity:.85}
.bubble-lustre{position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg,#ffffff00 20deg,#fff 42deg,#cae9f0c9 57deg,transparent 77deg,transparent 215deg,var(--rim-warm) 245deg,transparent 272deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gateway-lustre 19s linear var(--float-delay) infinite;opacity:.67}
.bubble-field .bubble-content{padding:17px 9px 10px;gap:0;width:100%;color:#24465e}
.bubble-field .bubble-content svg{width:23px;height:23px;color:#397a9e;margin-bottom:10px;stroke-width:1.35}
.bubble-field .bubble-content small{font:7px/1.5 Arial,sans-serif;letter-spacing:.15em;color:#58788d;margin-bottom:5px}
.bubble-field .bubble-content strong{font-size:14px;line-height:1.55;letter-spacing:.025em;font-weight:600;text-shadow:0 1px 8px #fff;white-space:nowrap}
.bubble-field .bubble-content b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid #acc6d565;background:#ffffff70;font:16px/1 Arial,sans-serif;color:#487b99;margin-top:9px;transition:transform .25s,background .25s}
.bubble-field .bubble-vrchat .bubble-content svg{color:#647eaf}
.bubble-field .bubble-item:after{content:"";position:absolute;bottom:-6px;left:23%;right:23%;height:12px;background:radial-gradient(ellipse,#5b83a02e,transparent 70%);filter:blur(3px);pointer-events:none;animation:gateway-shadow var(--float-time) ease-in-out var(--float-delay) infinite}
.bubble-field .bubble-link:hover .bubble-sphere,.bubble-field .bubble-link:focus-visible .bubble-sphere{animation-play-state:paused;scale:1.035}
.bubble-field .bubble-link:hover .bubble-film,.bubble-field .bubble-link:focus-visible .bubble-film{box-shadow:inset 0 1px 2px #fff,inset 4px 1px 12px #ffffffc7,inset -3px -9px 16px #78a9c22e,0 16px 32px -17px #355d7d6e,0 0 0 1px #6fa7cd38}
.bubble-field .bubble-link:hover b,.bubble-field .bubble-link:focus-visible b{background:#fff;transform:translate(2px,-2px);color:#246890}
.bubble-field .bubble-link:active .bubble-sphere{scale:.975}.bubble-field .bubble-link:focus-visible{outline:2px solid #427eaa}
.bubble-field .bubble-atmosphere i{left:22%;top:17%;width:14px;height:14px;opacity:.45}.bubble-field .bubble-atmosphere i:nth-child(2){left:75%;top:13%;width:9px;height:9px}.bubble-field .bubble-atmosphere i:nth-child(3){left:50%;top:92%;width:17px;height:17px;opacity:.25}
@keyframes gateway-float{0%,100%{transform:translate3d(-2px,3px,0) rotate(-1.2deg)}33%{transform:translate3d(var(--drift-x),calc(-1 * var(--drift-y)),0) rotate(1deg)}68%{transform:translate3d(calc(-1 * var(--drift-x)),calc(-.4 * var(--drift-y)),0) rotate(-.5deg)}}
@keyframes gateway-lustre{to{transform:rotate(360deg)}}
@keyframes gateway-shadow{0%,100%{transform:scaleX(1);opacity:.75}33%{transform:scaleX(.82);opacity:.35}68%{transform:scaleX(.9);opacity:.55}}
.start-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:45px;scroll-margin-top:105px}.start-guide-grid .cluster-start-link{margin:0;padding:32px;display:flex;flex-direction:column;align-items:stretch;border-radius:20px;gap:19px}.start-guide-grid h3{font-size:25px}.start-guide-grid .cluster-start-action{justify-content:space-between;border-top:1px solid #b9d0e45e;padding-top:17px;margin-top:auto}.start-guide-grid .vrchat-start-link{background:linear-gradient(130deg,#edf0fc,#fff 65%,#fff5ee);border-color:#c5d0e8}.start-guide-grid .vrchat-start-link .eyebrow{color:#6279b0}
@media(min-width:1600px){.bubble-field{height:225px;bottom:53px}.bubble-field .bubble-item{height:208px}.bubble-field .bubble-content strong{font-size:15px}.bubble-field .bubble-content small{font-size:8px}.bubble-field .bubble-content svg{width:25px;height:25px}}
@media(max-height:820px) and (min-width:901px){.bubble-field{height:175px;bottom:41px}.bubble-caption{top:-8px}.bubble-field .bubble-item{height:153px}.bubble-field .bubble-content{padding-top:10px}.bubble-field .bubble-content svg{width:19px;height:19px;margin-bottom:6px}.bubble-field .bubble-content strong{font-size:12px}.bubble-field .bubble-content b{margin-top:6px;width:21px;height:21px}}
@media(max-width:1100px) and (min-width:641px){.bubble-field{left:4%;right:4%;gap:17px;height:190px}.bubble-field .bubble-item{height:166px}.bubble-field .bubble-content strong{font-size:12px}.bubble-field .bubble-content small{font-size:6px;letter-spacing:.08em}.bubble-field .bubble-content svg{width:21px;height:21px;margin-bottom:6px}.bubble-field .bubble-content b{margin-top:7px}.start-guide-grid{gap:15px}.start-guide-grid .cluster-start-link{padding:25px}}
@media(max-width:800px) and (min-width:641px){.bubble-field{gap:12px;height:173px}.bubble-field .bubble-item{height:146px}.bubble-field .bubble-content strong{font-size:11px}.bubble-field .bubble-content small{font-size:5px}.bubble-field .bubble-content svg{width:18px;height:18px}.bubble-field .bubble-content b{width:20px;height:20px;font-size:13px}.bubble-sphere{inset:4px 0 8px}}
@media(max-width:640px){
 .bubble-field{position:relative;inset:auto;grid-template-columns:repeat(2,minmax(0,1fr));width:88%;height:auto;gap:10px 22px;padding-top:37px;margin:28px auto 0;align-items:center}
 .bubble-caption{top:0;left:0;right:0;gap:11px;font-size:8px;white-space:nowrap}.bubble-caption>span{font-size:5px;letter-spacing:.12em}
 .bubble-field .bubble-item{inset:auto;top:0;aspect-ratio:1.03;height:auto;--drift-x:3px;--drift-y:7px}.bubble-field .bubble-watch,.bubble-field .bubble-vrchat{top:-4px}
 .bubble-sphere{inset:3px 0 8px}.bubble-field .bubble-content{padding:13px 4px 7px}.bubble-field .bubble-content svg{width:21px;height:21px;margin-bottom:8px}.bubble-field .bubble-content small{font-size:6px;letter-spacing:.12em;margin-bottom:5px}.bubble-field .bubble-content strong{font-size:12px;line-height:1.5}.bubble-field .mobile-break{display:none}.bubble-field .bubble-content b{font-size:14px;width:22px;height:22px;margin-top:7px}.bubble-field .bubble-film:before{padding:1.3px}.bubble-lustre{padding:2.5px}.bubble-field .bubble-atmosphere i{left:48%;top:23%;width:10px;height:10px}.bubble-field .bubble-atmosphere i:nth-child(2){left:95%;top:48%;width:9px;height:9px}.bubble-field .bubble-atmosphere i:nth-child(3){display:none}
 .start-guide-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}.start-guide-grid .cluster-start-link{padding:26px;gap:12px}.start-guide-grid h3{font-size:23px}.start-guide-grid .cluster-start-action{margin-top:0}
}
@media(max-width:360px){.bubble-field{gap:8px 17px;width:89%}.bubble-field .bubble-content strong{font-size:11px}.bubble-field .bubble-content small{font-size:5px}.bubble-field .bubble-content svg{width:19px;height:19px;margin-bottom:5px}.bubble-field .bubble-content b{margin-top:5px}.bubble-caption{font-size:7px;gap:8px}}
@media(prefers-reduced-motion:reduce){.bubble-field *,.bubble-field *:before,.bubble-field *:after{animation:none!important;transition:none!important}.bubble-field .bubble-sphere{scale:1!important}}
.motion-paused .bubble-field *{transition:none!important}.motion-paused .bubble-field .bubble-sphere{scale:1!important}

/* The hero's text and illustration share a content-sized row. Navigation
   follows that row, so larger headings and music controls never collide. */
@media(min-width:641px){
 .portal-site .hero,.portal-site .hero.has-unit{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto auto;height:auto;min-height:calc(100svh - 84px);padding-bottom:12px}
 .portal-site .hero-content{grid-column:1;grid-row:1;align-self:start;padding-bottom:0}
 .portal-site .invitation-stage{grid-column:1;grid-row:1;position:relative;inset:auto;justify-self:end;align-self:end;margin:24px 2% 34px 0}
 .portal-site .hero-actions{column-gap:28px;row-gap:14px;flex-wrap:wrap;align-items:center}
 .portal-site .hero-actions .text-button{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
 .portal-site .hero .music-entry{margin-top:22px}
 .portal-site .bubble-field{grid-column:1;grid-row:2;position:relative;inset:auto;width:85.8%;height:auto;margin:40px auto 0;row-gap:30px}
 .portal-site .bubble-caption{position:static;grid-column:1/-1;inset:auto;min-height:16px;margin:0;align-self:start}
 .portal-site .journey-scroll{grid-column:1;grid-row:3;position:relative;inset:auto;transform:none;justify-self:center;margin:26px auto 0}
}
@media(min-width:1600px){.portal-site .bubble-field{width:84%;margin-top:44px}}
@media(min-width:641px) and (max-width:1100px){.portal-site .bubble-field{width:92%;margin-top:36px}.portal-site .hero-actions{column-gap:20px}.portal-site .invitation-stage{margin-right:1%}}
@media(min-width:641px) and (max-width:900px){.portal-site .hero,.portal-site .hero.has-unit{min-height:calc(100svh - 76px)}.portal-site .hero-actions{align-items:flex-start}}
@media(min-width:901px) and (max-height:820px){.portal-site .hero,.portal-site .hero.has-unit{min-height:calc(100svh - 72px)}.portal-site .bubble-field{margin-top:32px;row-gap:28px}.portal-site .journey-scroll{margin-top:22px}}