.blu{--ink:#16181d;--turq:#39d0c2;--pur:#6b4bce;--yel:#fdc801}.blu__head{margin-bottom:14px}.blu__badge{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:6px 14px;border-radius:999px;background:var(--yel);color:var(--ink);font-size:1.3rem;font-weight:800}.blu__stepper{position:relative;display:flex;justify-content:space-between;max-width:260px;margin:0 auto 14px}.blu__rail{position:absolute;left:14px;right:14px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#dfe3e7;overflow:hidden}.blu__rail i{position:absolute;inset:0 auto 0 0;width:0;background:var(--turq);border-radius:4px;transition:width .35s ease}.blu__stepper button{position:relative;z-index:1;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#fff;color:#6b7280;font:inherit;font-size:1.3rem;font-weight:800;box-shadow:0 0 0 2px #dfe3e7;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease,scale .25s ease}.blu__stepper button.is-done{background:var(--turq);color:var(--ink);box-shadow:0 0 0 2px var(--turq)}.blu__stepper button.is-on{background:var(--ink);color:#fff;box-shadow:0 0 0 2px var(--ink);scale:1.12}.blu__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0 -20px;padding:4px 20px 14px;scroll-padding:0 20px;scrollbar-width:none}.blu__track::-webkit-scrollbar{display:none}.blu__card{flex:0 0 72%;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:8px;box-shadow:0 8px 22px #16181d14}.blu__stage{position:relative;height:150px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:#e9fbf8 radial-gradient(rgba(22,24,29,.07) 1px,transparent 1.2px) 0 0/14px 14px}.blu__card--2 .blu__stage{background-color:#fff6cc}.blu__card--3 .blu__stage{background-color:#efeaff}.blu__card--0 .blu__stage{background-color:#e3f7ec}.blu__svg{position:absolute;top:10px;right:6px;bottom:4px;left:6px;width:calc(100% - 12px);height:calc(100% - 14px);display:block}.blu__stage--img{height:auto;aspect-ratio:1/1;max-height:240px;background:#eef8f6}.blu__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:block}.blu__n{position:absolute;z-index:2;top:10px;left:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:1.4rem}.blu__body{padding:12px 8px 8px}.blu__body h3{margin:0 0 4px;font-size:1.65rem;line-height:1.25;font-weight:800}.blu__body p{margin:0;font-size:1.38rem;line-height:1.45;color:#4b5563}.blu__note{margin-top:6px}.blu__svg *{transform-box:fill-box}.blu-cap{transform-origin:50% 100%;animation:blu-cap 3s cubic-bezier(.6,0,.3,1) infinite}.blu-pop{opacity:0;animation:blu-pop 3s ease infinite}@keyframes blu-cap{0%,12%{transform:none}38%,72%{transform:translate(30px,-12px) rotate(24deg)}92%,to{transform:none}}@keyframes blu-pop{0%,34%{opacity:0}44%,66%{opacity:1}76%,to{opacity:0}}.blu-ridges{animation:blu-ridge 3s linear infinite}@keyframes blu-ridge{0%{transform:none}55%{transform:translate(-24px)}to{transform:translate(-24px)}}.blu-arrow{stroke-dasharray:100;animation:blu-draw 3s ease infinite}.blu-arrowhead{opacity:0;animation:blu-head 3s ease infinite}.blu-click{transform-origin:center;opacity:0;animation:blu-click 3s cubic-bezier(.2,1.5,.4,1) infinite}@keyframes blu-draw{0%{stroke-dashoffset:100}50%,85%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}@keyframes blu-head{0%,45%{opacity:0}52%,85%{opacity:1}95%,to{opacity:0}}@keyframes blu-click{0%,55%{opacity:0;transform:scale(.4)}64%,86%{opacity:1;transform:scale(1)}96%,to{opacity:0;transform:scale(.8)}}.blu-brush{animation:blu-brush 1.1s ease-in-out infinite alternate}@keyframes blu-brush{0%{transform:translate(-44px,14px)}to{transform:translate(40px,10px)}}.blu-foam circle{transform-origin:center;animation:blu-foam 3.3s ease infinite}.blu-foam circle:nth-child(2n){animation-delay:.4s}.blu-foam circle:nth-child(3n){animation-delay:.8s}@keyframes blu-foam{0%,10%{transform:scale(0)}35%,80%{transform:scale(1)}to{transform:scale(1.1);opacity:0}}.blu-dirt{animation:blu-dirt 3.3s ease infinite}@keyframes blu-dirt{0%,10%{opacity:.95}70%,to{opacity:.08}}.blu-cloth{animation:blu-cloth 2.8s cubic-bezier(.5,0,.4,1) infinite}@keyframes blu-cloth{0%{transform:translate(-70px,30px) rotate(-6deg)}55%{transform:translate(170px,40px) rotate(6deg)}56%,to{transform:translate(240px,40px)}}.blu-spark path{transform-origin:center;animation:blu-twinkle 1.4s ease-in-out infinite}.blu-spark .blu-s2{animation-delay:.45s}.blu-spark .blu-s3{animation-delay:.9s}@keyframes blu-twinkle{0%,to{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}.blu-wind path{animation:blu-wind 2.4s ease-in-out infinite}.blu-wind path:nth-child(2){animation-delay:.5s}.blu-wind path:nth-child(3){animation-delay:1s}@keyframes blu-wind{0%{transform:translate(-10px);opacity:0}40%{opacity:1}to{transform:translate(40px);opacity:0}}.blu__card:not(.is-on) .blu__svg *{animation-play-state:paused}@media(min-width:990px){.blu__stepper{display:none}.blu__track{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;overflow:visible;margin:0;padding:0}.blu__stage{height:170px}.blu__stage--img{height:auto;max-height:none}.blu__card{transition:translate .25s ease,box-shadow .25s ease}.blu__card:hover{translate:0 -4px;box-shadow:0 14px 30px #16181d1f}}@media(prefers-reduced-motion:reduce){.blu__svg *{animation:none!important}.blu-pop,.blu-arrowhead,.blu-click{opacity:1}.blu-arrow{stroke-dashoffset:0}.blu-cloth{display:none}.blu__rail i,.blu__stepper button,.blu__card{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/bloup-how.css.map */