#puni-float-demo{width:100%;margin-inline:auto}

#puni-float-demo .puni-page{background:#fffaf5;color:#474148;font-family:'Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;overflow:hidden;isolation:isolate}
#puni-float-demo .puni-header{display:flex;align-items:center;justify-content:space-between;padding:24px 36px;position:relative;z-index:2;gap:16px}
#puni-float-demo .puni-header>span:first-child{font-size:25px;font-weight:900;letter-spacing:1px}
#puni-float-demo .puni-menu{font-size:12px;letter-spacing:1px}
#puni-float-demo .puni-hero{min-height:520px;position:relative;display:grid;grid-template-columns:44% 56%;align-items:center}
#puni-float-demo .puni-blob{position:absolute;pointer-events:none;z-index:-1}
#puni-float-demo .pink{background:#fce8e5;left:-13%;top:1%;width:70%;height:91%;border-radius:47% 50% 49% 37%;transform:rotate(8deg)}
#puni-float-demo .blue{background:#e1eef5;right:-16%;top:-25%;width:54%;height:82%;border-radius:53% 0 40% 47%;transform:rotate(-14deg)}
#puni-float-demo .puni-copy{padding:40px 0 64px 36px;position:relative;z-index:2}
#puni-float-demo h1{font-size:clamp(32px,5.5vw,61px);font-weight:900;line-height:1.35;letter-spacing:2px;margin:0 0 22px}
#puni-float-demo p{font-size:14px;line-height:2;letter-spacing:1px;margin:0 0 26px}
#puni-float-demo .puni-copy a{display:inline-flex;gap:45px;background:#e88f96;border-radius:50px;padding:16px 28px;color:#fff;text-decoration:none;font-size:15px;font-weight:700;align-items:center}
#puni-float-demo .puni-stage{position:relative;min-width:0;height:500px;perspective:900px}
#puni-float-demo .puni-item{position:absolute;aspect-ratio:1;animation:puni-drift 6.6s ease-in-out infinite;will-change:transform;z-index:2;--tilt:-4deg;--lift:20px}
#puni-float-demo .puni-sprite{width:100%;height:100%;background-image:url('puni-floating-sprites.png');background-repeat:no-repeat;background-size:200% 200%;filter:drop-shadow(0 15px 13px #aa795c18)}
#puni-float-demo .croissant{width:64%;left:8%;top:12%;z-index:4}
#puni-float-demo .croissant .puni-sprite{background-position:0 0}
#puni-float-demo .cheesecake{width:29%;left:0;top:0;animation-duration:7.8s;animation-delay:-2.4s;--tilt:6deg;--lift:13px;filter:blur(.7px)}
#puni-float-demo .cheesecake .puni-sprite{background-position:100% 0}
#puni-float-demo .donut{width:29%;right:0;top:3%;animation-duration:6.2s;animation-delay:-1.3s;--tilt:7deg;--lift:18px;filter:blur(.5px)}
#puni-float-demo .donut .puni-sprite{background-position:0 100%}
#puni-float-demo .melon{width:32%;right:-1%;bottom:4%;animation-duration:8s;animation-delay:-3.7s;--tilt:-8deg;--lift:14px;filter:blur(.7px)}
#puni-float-demo .melon .puni-sprite{background-position:100% 100%}
#puni-float-demo .puni-shadow{position:absolute;left:14%;top:83%;width:54%;height:6%;background:#a5785735;border-radius:50%;filter:blur(17px);animation:puni-shadow 6.6s ease-in-out infinite}
#puni-float-demo .puni-orb{position:absolute;display:block;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff4f5,#f0b3c0);filter:blur(2px);animation:puni-drift 8s ease-in-out infinite;--tilt:0deg;--lift:12px}
#puni-float-demo .orb-a{right:15%;top:47%;animation-delay:-3s}
#puni-float-demo .orb-b{left:6%;bottom:13%;width:19px;height:19px;animation-delay:-1s}
#puni-float-demo.is-paused .puni-stage *{animation-play-state:paused!important}
@keyframes puni-drift{0%,100%{transform:translate3d(0,0,0) rotate(var(--tilt))}50%{transform:translate3d(4px,calc(-1 * var(--lift)),0) rotate(calc(var(--tilt) + 4deg))}}
@keyframes puni-shadow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(.84);opacity:.45}}
@media(max-width:600px){#puni-float-demo .puni-header{padding:22px 22px 0}#puni-float-demo .puni-header>span:first-child{font-size:22px}#puni-float-demo .puni-menu{display:none}#puni-float-demo .puni-hero{display:flex;flex-direction:column;min-height:620px}#puni-float-demo .puni-copy{width:100%;box-sizing:border-box;padding:35px 24px 0}#puni-float-demo h1{font-size:39px;line-height:1.3;margin-bottom:12px}#puni-float-demo p{font-size:13px;line-height:1.8;margin-bottom:17px}#puni-float-demo .puni-copy a{font-size:14px;padding:13px 24px}#puni-float-demo .puni-stage{width:100%;height:330px;margin-top:10px}#puni-float-demo .croissant{width:62%;top:14%;left:14%}#puni-float-demo .cheesecake{width:24%;left:0;top:2%}#puni-float-demo .donut{width:25%;right:1%;top:0}#puni-float-demo .melon{width:26%;right:2%;bottom:3%}#puni-float-demo .pink{left:-35%;top:0;width:135%;height:55%;border-radius:45% 50% 40% 35%}#puni-float-demo .blue{right:-22%;top:46%;width:85%;height:50%;border-radius:48% 43% 0 38%}#puni-float-demo .puni-shadow{left:20%;top:76%;width:47%}}
@media(prefers-reduced-motion:reduce){#puni-float-demo .puni-stage *{animation:none!important}}

#puni-float-demo .puni-header,#puni-float-demo .puni-hero{max-width:1440px;margin-inline:auto}
#puni-float-demo .puni-motion-toggle{width:auto;min-height:36px;padding:7px 14px;border:1px solid #dcbfc1;background:#fffaf5;color:#66535a;border-radius:999px;font:inherit;font-size:11px;white-space:nowrap;cursor:pointer}
#puni-float-demo .puni-motion-toggle:hover{background:#fce8e5}
#puni-float-demo a:focus-visible,#puni-float-demo button:focus-visible{outline:3px solid #a76173;outline-offset:4px}

@media(min-width:1101px){#puni-float-demo .puni-hero{min-height:620px}#puni-float-demo .puni-stage{height:600px}#puni-float-demo .croissant{max-width:480px}}

#puni-float-demo .puni-logo{display:inline-flex;align-items:center;line-height:0}
#puni-float-demo .puni-logo img{display:block;height:56px;width:auto;max-width:none}
#puni-float-demo h1{line-height:0;margin:0 0 22px}
#puni-float-demo h1 .puni-headline{display:block;width:min(100%,440px);height:auto}
@media(max-width:600px){#puni-float-demo .puni-logo img{height:44px}#puni-float-demo h1 .puni-headline{width:min(100%,320px)}}