:root{color-scheme:light;--ink: #172433;--ink-soft: rgba(23, 36, 51, .62)}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;width:100%;touch-action:none;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:#d5e3ee}.filters{position:absolute;width:0;height:0}.hub{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4dvh,26px);padding:max(22px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));overflow:hidden}.wash,.mist{position:fixed;inset:0;pointer-events:none}.wash{inset:-8%;background:url(/sky.jpg) center 42% / cover no-repeat;filter:blur(10px) saturate(1.35) brightness(1.04);transform:scale(1.06)}.mist{background:linear-gradient(180deg,#ffffffc7,#ffffff38 16%,#ffffff0a 48%,#ffffff47)}h1,.caption,.stage{position:relative;z-index:1}h1{margin:0;font-family:Unbounded,Manrope,sans-serif;font-weight:500;font-size:clamp(1.35rem,4.8vw,2.05rem);letter-spacing:-.03em;line-height:1}.caption{margin:0;font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--ink-soft)}.stage{position:relative;width:min(92vw,640px,74dvh);aspect-ratio:1;container-type:size}.portrait-wrap{position:absolute;left:50%;top:50%;z-index:2;width:44cqmin;height:44cqmin;transform:translate(-50%,-50%);overflow:hidden;border-radius:50%;box-shadow:0 0 0 1.5px #ffffffd1,inset 0 1px #ffffffb3,0 18px 36px #142c4438}.portrait-wrap:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 10px 16px #ffffff47,inset 0 -16px 20px #14304a2e;pointer-events:none}.portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%;transform:scale(1.22);transform-origin:center 42%}.bubble-guide{--s: 29cqmin;--r: 40cqmin}.bubble-channel{--s: 25cqmin;--r: 39cqmin}.bubble-tiktok{--s: 23.5cqmin;--r: 38.5cqmin}.bubble-club{--s: 25.5cqmin;--r: 39.5cqmin}.bubble{position:absolute;left:50%;top:50%;z-index:3;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2);color:inherit;text-decoration:none;transform:rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1))}.drop{display:block;width:100%;height:100%;animation:drip var(--dur) cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:var(--delay)}.glass{position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;background:radial-gradient(ellipse at 50% 125%,rgba(18,42,64,.34),transparent 48%),linear-gradient(180deg,#ffffff47,#ffffff0d 42%,#ffffff29);box-shadow:inset 0 1px #ffffffb8,inset 0 -14px 18px #183a5833,0 12px 26px #16304829;backdrop-filter:blur(7px) saturate(1.85) contrast(1.06);-webkit-backdrop-filter:blur(7px) saturate(1.85) contrast(1.06);transition:transform .18s ease}.glass:before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;background:linear-gradient(185deg,#fffffff2,#ffffff47 34%,#ffffff0d 58%,#10243647);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}.ripple{position:absolute;inset:-12%;background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.75),transparent 32%),radial-gradient(circle at 70% 78%,rgba(186,214,232,.45),transparent 38%),linear-gradient(160deg,rgba(255,255,255,.2),transparent 55%);filter:url(#ripple);mix-blend-mode:soft-light;opacity:.9;pointer-events:none}.sheen{position:absolute;top:9%;left:16%;z-index:2;width:52%;height:28%;border-radius:50%;background:radial-gradient(ellipse at center,#ffffffc7,#fff0 72%);pointer-events:none}.catch{position:absolute;top:17%;left:31%;z-index:2;width:14%;height:9%;border-radius:50%;background:#fffc;filter:blur(.6px);pointer-events:none}.glass strong{position:relative;z-index:4;max-width:78%;font-family:Manrope,sans-serif;font-size:clamp(11px,3.15cqmin,15px);font-weight:600;letter-spacing:-.035em;line-height:1.12;text-align:center}.glass strong .lead{display:inline-block;margin-bottom:2px;font-size:1.45em;font-weight:700;letter-spacing:-.045em}.bubble:active .glass{transform:scale(1.1,.86)}.bubble:focus-visible .glass{outline:2px solid rgba(23,36,51,.72);outline-offset:4px}@media(hover:hover){.bubble:hover .drop{animation-play-state:paused}}@keyframes drip{0%,46%{transform:translateY(2px) scale(1);border-radius:50%;animation-timing-function:cubic-bezier(.42,0,.2,1)}56%{transform:translate(calc(var(--dx) * .25),-16px) scale(.96,1.08);border-radius:57% 55% 47% 48%/63% 61% 43% 44%;animation-timing-function:cubic-bezier(.62,.04,.9,.45)}68%{transform:translate(var(--dx),14px) scale(1.08,.9);border-radius:48% 52% 50% 50%/44% 46% 56% 54%;animation-timing-function:cubic-bezier(.16,.82,.28,1)}80%{transform:translate(calc(var(--dx) * .2)) scale(.99,1.03);border-radius:53% 47% 50% 50%/56% 50% 48%;animation-timing-function:ease-out}to{transform:translateY(2px) scale(1);border-radius:50%}}@media(prefers-reduced-motion:reduce){.drop{animation:none;border-radius:50%}}@media(hover:none)and (pointer:coarse){.drop{animation:none;border-radius:50%}}@media(max-width:700px){.hub{gap:8px;padding-right:4px;padding-left:4px}.stage{width:min(calc(100vw - 4px),88dvh)}.portrait-wrap{width:52cqmin;height:52cqmin}.bubble-guide{--s: 32cqmin;--r: 44cqmin}.bubble-channel{--s: 27cqmin;--r: 43cqmin}.bubble-tiktok{--s: 25cqmin;--r: 42.5cqmin}.bubble-club{--s: 27.5cqmin;--r: 43.5cqmin}.glass strong{font-size:clamp(12px,3.7cqmin,16px)}}@media(max-height:640px){.hub{gap:8px}h1{font-size:1.25rem}}