.foam-bubble{background:radial-gradient(circle at 38% 34%, transparent 48%, color-mix(in srgb, var(--color-sea) 16%, transparent) 74%), var(--color-paper);box-shadow: inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--color-paper),  0 0 0 var(--u) var(--foam-rim);border-radius:50%;position:absolute}@media (prefers-reduced-motion:no-preference){html[data-fx] .foam-group{animation:2.6s ease-in-out -.9s infinite alternate foam-bob}html[data-fx] .foam-group[data-group="1"]{animation-duration:3.2s;animation-delay:-2.1s}html[data-fx] .foam-group[data-group="2"]{animation-duration:3.9s;animation-delay:-1.4s}html[data-fx] [data-foam]:not([data-live]) .foam-group{animation-play-state:paused}@supports (animation-timeline:view()){html[data-fx] .foam-group{animation:2.6s ease-in-out -.9s infinite alternate foam-bob,linear both foam-in;animation-timeline:auto,view();animation-range:normal,entry cover 18%}html[data-fx] .foam-group[data-group="1"]{animation-duration:3.2s, auto;animation-delay:-2.1s,0s;animation-range:normal,entry cover 24%}html[data-fx] .foam-group[data-group="2"]{animation-duration:3.9s, auto;animation-delay:-1.4s,0s;animation-range:normal,entry cover 30%}html[data-fx] main>:first-child .foam-group{animation-name:foam-bob;animation-timeline:auto}}}@keyframes foam-bob{0%{translate:0 calc(-3 * var(--u))}to{translate:0 calc(2 * var(--u))}}@keyframes foam-in{0%{opacity:0}}@media (forced-colors:active){.foam-bubble{display:none}}