:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff;background:#74d9ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{appearance:none;font:inherit;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.bubbles-game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(circle at 16% 18%,rgb(255 255 255 / 52%) 0 110px,transparent 111px),radial-gradient(circle at 82% 12%,rgb(255 246 151 / 42%) 0 150px,transparent 151px),radial-gradient(circle at 50% 108%,rgb(0 151 190 / 45%) 0 310px,transparent 311px),linear-gradient(180deg,#8be7ff,#4cc6f7 52%,#18a6d7);touch-action:none;-webkit-user-select:none;user-select:none}.bubbles-game:before,.bubbles-game:after{position:absolute;right:-10%;left:-10%;pointer-events:none;content:"";opacity:.34}.bubbles-game:before{bottom:12%;height:140px;background:repeating-radial-gradient(ellipse at center,rgb(255 255 255 / 45%) 0 3px,transparent 4px 38px);transform:rotate(-3deg)}.bubbles-game:after{bottom:-42px;height:180px;background:radial-gradient(ellipse at 15% 20%,rgb(255 255 255 / 42%) 0 70px,transparent 72px),radial-gradient(ellipse at 42% 8%,rgb(255 255 255 / 34%) 0 90px,transparent 92px),radial-gradient(ellipse at 74% 30%,rgb(255 255 255 / 38%) 0 86px,transparent 88px)}.bubbles-stage{position:absolute;inset:0;overflow:hidden}.start-button{position:absolute;top:50%;left:50%;z-index:3;min-width:min(76vw,520px);min-height:min(34vh,240px);padding:34px 52px;border:8px solid rgb(255 255 255 / 78%);border-radius:8px;color:#fff;background:radial-gradient(circle at 22% 22%,rgb(255 255 255 / 42%) 0 44px,transparent 45px),linear-gradient(135deg,#00c2ff,#52e5e7 44%,#a3e635);box-shadow:0 32px 80px #004b6e47,inset 0 -10px #0000001f;font-size:clamp(72px,16vw,176px);font-weight:1000;line-height:.9;letter-spacing:0;cursor:pointer;transform:translate(-50%,-50%) rotate(-3deg);transition:transform .16s ease,box-shadow .16s ease}.start-button:hover{transform:translate(-50%,-52%) rotate(2deg) scale(1.03)}.start-button:focus-visible,.bubble:focus-visible{outline:8px solid #ffffff;outline-offset:8px}.bubbles-game.is-playing .start-button{display:none}.bubble{position:absolute;top:0;display:block;width:var(--bubble-size);height:var(--bubble-size);padding:0;border:0;border-radius:50%;outline:none;background:transparent;cursor:pointer;transform:translate3d(-50%,var(--bubble-start-y),0) scale(.82);animation:bubble-rise var(--bubble-duration) linear forwards;will-change:transform,opacity}.bubble:before{position:absolute;inset:0;border:4px solid rgb(255 255 255 / 72%);border-radius:inherit;content:"";background:radial-gradient(circle at 30% 24%,rgb(255 255 255 / 92%) 0 12%,transparent 13%),radial-gradient(circle at 42% 38%,rgb(255 255 255 / 38%) 0 28%,transparent 29%),radial-gradient(circle at 68% 74%,rgb(255 255 255 / 28%) 0 18%,transparent 19%),var(--bubble-tint, rgb(255 255 255 / 18%));box-shadow:inset -16px -20px 28px #00609629,inset 10px 12px 22px #ffffff47,0 18px 38px #005b8c2e;animation:bubble-wobble 1.8s ease-in-out infinite alternate;will-change:transform}.bubble:focus:not(:focus-visible){outline:none}.bubble--blue{--bubble-tint: rgb(49 179 255 / 28%)}.bubble--cyan{--bubble-tint: rgb(65 245 232 / 28%)}.bubble--mint{--bubble-tint: rgb(132 255 183 / 26%)}.bubble--pink{--bubble-tint: rgb(255 133 203 / 24%)}.bubble--yellow{--bubble-tint: rgb(255 232 92 / 24%)}.bubble.is-popping{pointer-events:none;animation:bubble-pop .28s ease-out forwards}.bubble.is-popping:before{animation:none;transform:none}.bubble-splash{position:absolute;display:grid;width:var(--splash-size);height:var(--splash-size);place-items:center;pointer-events:none;font-size:var(--splash-size);line-height:1;text-shadow:0 7px 18px rgb(0 84 126 / 22%);transform:translate(-50%,-50%);animation:bubble-splash .72s cubic-bezier(.16,.82,.28,1) forwards;will-change:transform,opacity}.bubble-splash--cyan{color:#d9fffb}.bubble-splash--blue{color:#e0f7ff}.bubble-splash--mint{color:#d7ffe8}.bubble-splash--pink{color:#ffe0f1}.bubble-splash--yellow{color:#fff7b8}.bubble-splash--white{color:#fff}.bubble-drop{position:absolute;width:var(--drop-width);height:var(--drop-height);border-radius:999px;background:linear-gradient(180deg,rgb(255 255 255 / 92%) 0%,rgb(255 255 255 / 40%) 34%,transparent 100%),#e0f7ffe0;box-shadow:0 8px 18px #00547e29;pointer-events:none;transform:translate(-50%,-50%) rotate(var(--drop-rotation));animation:bubble-drop .64s cubic-bezier(.12,.78,.24,1) forwards;will-change:transform,opacity}.bubble-drop--cyan{background:radial-gradient(circle at 34% 22%,rgb(255 255 255 / 86%) 0 18%,transparent 19%),#bcfffae0}.bubble-drop--blue{background:radial-gradient(circle at 34% 22%,rgb(255 255 255 / 86%) 0 18%,transparent 19%),#cff4ffe5}.bubble-drop--mint{background:radial-gradient(circle at 34% 22%,rgb(255 255 255 / 86%) 0 18%,transparent 19%),#cdffe5e0}.bubble-drop--white{background:radial-gradient(circle at 34% 22%,rgb(255 255 255 / 92%) 0 18%,transparent 19%),#ffffffe0}.perf-low .bubble{box-shadow:none}.perf-low .bubble:before{box-shadow:inset -10px -14px 18px #0060961f,inset 8px 10px 16px #ffffff38}.perf-low .bubble-drop{background:#e0f7ffd6;box-shadow:none}.perf-low .bubble-drop--cyan{background:#bcfffad6}.perf-low .bubble-drop--blue{background:#cff4ffdb}.perf-low .bubble-drop--mint{background:#cdffe5d6}.perf-low .bubble-drop--white{background:#ffffffdb}@keyframes bubble-rise{0%{opacity:0;transform:translate3d(-50%,var(--bubble-start-y),0) translate(0) scale(.82)}10%{opacity:1}to{opacity:.92;transform:translate3d(-50%,var(--bubble-end-y),0) translate(var(--bubble-drift)) scale(1)}}@keyframes bubble-wobble{0%{transform:translate3d(calc(var(--bubble-sway) * -1),0,0)}to{transform:translate3d(var(--bubble-sway),0,0)}}@keyframes bubble-pop{0%{opacity:1;transform:translate3d(-50%,var(--bubble-current-y, 0),0) scale(1)}to{opacity:0;transform:translate3d(-50%,var(--bubble-current-y, 0),0) scale(1.42)}}@keyframes bubble-splash{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(0)}20%{opacity:1;transform:translate(calc(-50% + var(--splash-x) * .28),calc(-50% + var(--splash-y) * .28)) scale(1.05) rotate(calc(var(--splash-rotation) * .3))}to{opacity:0;transform:translate(calc(-50% + var(--splash-x)),calc(-50% + var(--splash-y))) scale(.32) rotate(var(--splash-rotation))}}@keyframes bubble-drop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(var(--drop-rotation))}12%{opacity:1;transform:translate(calc(-50% + var(--drop-x) * .28),calc(-50% + var(--drop-y) * .12)) scale(1) rotate(var(--drop-rotation))}62%{opacity:.7}to{opacity:0;transform:translate(calc(-50% + var(--drop-x)),calc(-50% + var(--drop-y))) scale(.24) rotate(var(--drop-rotation))}}@media(max-width:620px){.start-button{min-width:82vw;min-height:190px}}