.bubble-intro[hidden],.tap-layout[hidden],#phone-flow[hidden]{display:none!important}
.bubble-intro{--bubble-color:#dfff39;min-height:100svh;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;background:#09090a;padding:26px clamp(20px,5vw,64px);color:#f4f2ed}
.bubble-intro:before{content:"";position:absolute;inset:10% -30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bubble-color),transparent 92%),transparent 60%)}
.bubble-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bubble-header .brand img{width:31px;height:31px}
.bubble-edition{font:10px "DM Mono",monospace;letter-spacing:.1em;color:var(--bubble-color);text-align:right}
.bubble-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 0 24px}
.bubble-kicker{font:10px "DM Mono",monospace;letter-spacing:.18em;color:#a4a49c;margin:0 0 14px}
.bubble-center h1{font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:-.065em;margin:0}
.bubble-stage{position:relative;width:min(70vw,310px);aspect-ratio:1;margin:48px 0 40px;display:grid;place-items:center}
.bubble-float{width:100%;height:100%;animation:bubble-float 4s ease-in-out infinite}
.bubble-orb{--growth:1;--touch-x:32%;--touch-y:24%;position:relative;width:100%;height:100%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--bubble-color),transparent 32%);border-radius:50%;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;color:var(--bubble-color);background:radial-gradient(circle at var(--touch-x) var(--touch-y),#ffffff38,transparent 24%),radial-gradient(circle at 70% 78%,color-mix(in srgb,var(--bubble-color),transparent 60%),transparent 55%),radial-gradient(circle at 32% 25%,color-mix(in srgb,var(--bubble-color),transparent 80%),#101213 70%);box-shadow:inset 0 0 38px color-mix(in srgb,var(--bubble-color),transparent 82%),inset -10px -12px 24px #0007,0 0 48px color-mix(in srgb,var(--bubble-color),transparent 94%);transform:scale(var(--growth));transition:transform .2s ease,border-radius .2s ease,box-shadow .2s ease}
.bubble-orb:before{content:"";position:absolute;inset:7%;border-radius:50%;border-top:3px solid #fff8;border-left:1px solid #fff2;transform:rotate(-32deg);pointer-events:none}
.bubble-orb:after{content:"";position:absolute;top:17%;left:24%;width:25%;height:9%;border-radius:50%;background:#ffffff32;filter:blur(5px);transform:rotate(-35deg);pointer-events:none}
.bubble-symbol{font-size:clamp(60px,15vw,112px);font-weight:800;letter-spacing:-.07em;line-height:1;text-shadow:0 0 25px color-mix(in srgb,var(--bubble-color),transparent 60%);pointer-events:none}
.bubble-orb.is-pressed{transform:scale(calc(var(--growth) * 1.03),calc(var(--growth) * .93));border-radius:46% 54% 49% 51%;box-shadow:inset 0 0 60px color-mix(in srgb,var(--bubble-color),transparent 65%),0 0 60px color-mix(in srgb,var(--bubble-color),transparent 85%)}
.bubble-orb.is-wobbling{animation:bubble-wobble .42s ease-out}
.bubble-orb:focus-visible,.bubble-skip:focus-visible,.bubble-replay:focus-visible{outline:3px solid #fff;outline-offset:8px}
.bubble-hint{font-size:16px;color:#c4c1ba;margin:0;line-height:1.5;min-height:24px}
.bubble-progress{display:flex;gap:9px;margin:16px 0 0}
.bubble-progress span{width:6px;height:6px;border:1px solid #70716c;border-radius:50%}
.bubble-progress span.filled{background:var(--bubble-color);border-color:var(--bubble-color)}
.bubble-skip,.bubble-replay{background:none;border:0;color:#aaa8a2;min-height:44px;font:10px "DM Mono",monospace;letter-spacing:.05em;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.bubble-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font:9px "DM Mono",monospace;letter-spacing:.09em;color:#777;min-height:44px}
.bubble-replay{margin-top:16px;padding:8px 0;color:var(--response)}
.bubble-particles{position:absolute;inset:0;pointer-events:none}
.bubble-particles i{position:absolute;left:50%;top:50%;width:9px;height:9px;border:1px solid var(--bubble-color);border-radius:50%;opacity:0}
.is-bursting .bubble-float{animation:none}
.is-bursting .bubble-orb{animation:bubble-pop .4s ease-out forwards;pointer-events:none}
.is-bursting .bubble-particles i{animation:bubble-particle .45s ease-out forwards}
.bubble-revealed{animation:bubble-reveal .35s ease-out}
@keyframes bubble-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bubble-wobble{0%{transform:scale(calc(var(--growth) * 1.12),calc(var(--growth) * .87))}40%{transform:scale(calc(var(--growth) * .94),calc(var(--growth) * 1.06))}70%{transform:scale(calc(var(--growth) * 1.03),calc(var(--growth) * .97))}100%{transform:scale(var(--growth))}}
@keyframes bubble-pop{0%{transform:scale(var(--growth));opacity:1}60%{transform:scale(1.35);opacity:.65}100%{transform:scale(1.48);opacity:0}}
@keyframes bubble-particle{0%{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(110px);opacity:.9}100%{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(210px) scale(.3);opacity:0}}
@keyframes bubble-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.bubble-intro{padding:20px}.bubble-edition{font-size:9px;max-width:150px;line-height:1.6}.bubble-stage{margin:40px 0 36px}.bubble-footer{font-size:8px}.bubble-hint{font-size:14px}}
@media(prefers-reduced-motion:reduce){.bubble-float,.bubble-orb,.bubble-revealed,.is-bursting .bubble-orb,.is-bursting .bubble-particles i{animation:none!important;transition:none!important}.bubble-orb.is-pressed{transform:scale(var(--growth))}}