*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}#root{width:100%;max-width:none;text-align:initial;border:none;margin:0}button{font:inherit}.music_sp{width:calc(104 / var(--design-w) * 100%);height:calc(104 / var(--design-h) * 100%);top:calc(38 / var(--design-h) * 100%);right:calc(35 / var(--design-w) * 100%);z-index:1000;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;position:absolute}.music_sp:disabled{cursor:not-allowed;opacity:.55}.music_icon_img{object-fit:contain;width:100%;height:100%}.design-viewport{background:#0f1117;justify-content:center;align-items:center;width:100vw;height:100svh;display:flex;overflow:hidden}.design-stage{aspect-ratio:9/16;--design-w:1080;--design-h:1920;flex-shrink:0;width:min(100vw,56.25svh);height:min(100svh,177.778vw);position:relative;overflow:hidden}.design-stage__inner{width:100%;height:100%;position:absolute;inset:0}.loading-screen{background-position:bottom;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.loading-screen--pending{background-color:#0f1117}.loading-logo{width:calc(214 / var(--design-w) * 100%);top:calc(38 / var(--design-h) * 100%);left:calc(38 / var(--design-w) * 100%);position:absolute}.loading-logo img{width:100%;display:block}.loading-img{width:calc(80 / var(--design-w) * 100%);height:calc(80 / var(--design-w) * 100%)}.loading-img-spin{object-fit:contain;transform-origin:50%;width:100%;height:100%;animation:1.2s linear infinite loading-spin}@keyframes loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.loading-img-spin{animation:none}}.page-a{background-image:url(/assets/index_bg-DbwWyrfK.webp);background-position:bottom;background-repeat:no-repeat;background-size:cover}.btn_login{background-image:url(/assets/index_login-PXmyCDej.webp)}.brand{width:calc(704 / var(--design-w) * 100%);top:calc(280 / var(--design-h) * 100%);position:absolute;left:50%;transform:translate(-50%)}.brand img{width:100%;display:block}.after_draw{width:calc(395 / var(--design-w) * 100%);height:calc(194 / var(--design-h) * 100%);top:calc(530 / var(--design-h) * 100%);right:calc(50 / var(--design-w) * 100%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;position:absolute}.after_draw--visible{opacity:1;visibility:visible;pointer-events:auto}.after_draw img{object-fit:contain;width:100%;height:100%;display:block}.page-b{background-position:bottom;background-repeat:no-repeat;background-size:cover}.figure-eight{width:calc(917 / var(--design-w) * 100%);max-width:100%;margin:0 auto;margin-top:calc(698 / var(--design-h) * 100%)}.figure-eight-hint{margin:0 0 calc(10 / var(--design-h) * 100%);min-height:1.6em;font-size:calc(26 / var(--design-w) * 100%);color:#ffffffd9}.figure-eight-progress{width:100%;height:calc(4 / var(--design-h) * 100%);margin-bottom:calc(12 / var(--design-h) * 100%);background:#ffffff1f;border-radius:999px;overflow:hidden}.figure-eight-progress-bar{border-radius:inherit;background:linear-gradient(90deg,#fbbf24,#f59e0b);height:100%;transition:width .15s}.figure-eight-area{aspect-ratio:1;border-radius:calc(16 / var(--design-w) * 100%);touch-action:none;-webkit-user-select:none;user-select:none;width:100%;position:relative;overflow:hidden}.img_background{width:100%;height:100%;position:relative}.img_background_img{object-fit:contain;pointer-events:none;z-index:1;opacity:0;width:100%;height:100%;animation:.9s ease-out 1.6s forwards ball1-fade-in;display:block;position:relative}.img_background_ball_1{object-fit:contain;width:46%;height:auto;top:calc(112 / var(--design-h) * 100%);z-index:2;opacity:0;will-change:transform, opacity;animation:.9s ease-out forwards ball1-fade-in,5s ease-in-out .9s infinite ball1-float;position:absolute;left:10%}@keyframes ball1-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ball1-float{0%,to{transform:translate(0)}25%{transform:translate(3px,-5px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,4px)}}@media (prefers-reduced-motion:reduce){.img_background_ball_1,.img_background_ball_2,.img_background_img,.hero-video{opacity:1;animation:none}}.img_background_ball_2{object-fit:contain;width:43%;height:auto;bottom:calc(153 / var(--design-h) * 100%);z-index:2;opacity:0;will-change:transform, opacity;animation:.9s ease-out .9s forwards ball1-fade-in,5s ease-in-out 1.8s infinite ball2-float;position:absolute;right:7%}@keyframes ball2-float{0%,to{transform:translate(0)}25%{transform:translate(3px,-5px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,4px)}}.figure-eight-canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.figure-eight-tip{margin:calc(10 / var(--design-h) * 100%) 0 0;font-size:calc(22 / var(--design-w) * 100%);color:#ffffff8c}.demo-card-highlight{width:calc(420 / var(--design-w) * 100%);max-width:100%;margin-bottom:calc(24 / var(--design-h) * 100%);text-align:center}.hero-video{top:0;left:calc(-108 / var(--design-w) * 100%);object-fit:cover;z-index:3;pointer-events:none;opacity:0;width:120%;height:100%;animation:.9s ease-out 2.5s forwards ball1-fade-in;position:absolute}.bottom_tips{width:100%;height:calc(180 / var(--design-h) * 100%);position:absolute;bottom:0}.Tips_1{width:calc(500 / var(--design-w) * 100%);color:#754d29;float:right;height:40px;font-size:16px}.Tips_2,.Tips_3{box-sizing:border-box;text-align:left;color:#754d29;width:100%;padding-left:10px;font-size:6px;line-height:8px;position:absolute;bottom:0;left:0;right:0}.Tips_3,.bottom_tips--draw-complete .Tips_2{visibility:hidden}.bottom_tips--draw-complete .Tips_3{visibility:visible}.page-c{height:100%;padding:calc(32 / var(--design-h) * 100%) calc(24 / var(--design-w) * 100%) calc(48 / var(--design-h) * 100%);text-align:center;background-image:url(/assets/pure_bg-BmtwULkT.webp);background-position:bottom;background-repeat:no-repeat;background-size:cover}.center_sp{width:100%;margin-top:calc(550 / var(--design-h) * 100%)}.barnd_sp{width:calc(1000 / var(--design-w) * 100%)}.bubble_sp{width:100%;margin-top:calc(40 / var(--design-h) * 100%);flex-wrap:wrap;justify-content:center;align-items:flex-start;display:flex}.bubble_box{flex-direction:column;align-items:center;width:50%;display:flex;position:relative}.cycle_img{pointer-events:none;width:60px;height:60px;margin:auto;transition:opacity .3s,visibility .3s;position:absolute;top:36px;left:0;right:0}.cycle_img--hidden{opacity:0;visibility:hidden}.bubble_box:nth-child(3){width:50%;margin-top:calc(60 / var(--design-h) * 100%)}.bubble1_img,.bubble2_img,.bubble3_img{vertical-align:middle;will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:5s ease-in-out infinite bubble-float;display:inline-block}.bubble1_img{width:calc(342 *2 / var(--design-w) * 100%);object-fit:contain;height:auto;margin-bottom:6px}.bubble1_text,.bubble2_text,.bubble3_text{opacity:0;transition:opacity .6s}.bubble_text--visible{opacity:1}.bubble1_text{width:calc(292 *2 / var(--design-w) * 100%)}.bubble2_img{width:calc(342 *2 / var(--design-w) * 100%);object-fit:contain;height:auto;margin-bottom:6px}.bubble2_text{width:calc(408 *2 / var(--design-w) * 100%)}.bubble3_img{width:calc(342 *2 / var(--design-w) * 100%);object-fit:contain;height:auto;margin-bottom:6px}.bubble3_text{width:calc(486 *2 / var(--design-w) * 100%)}@keyframes bubble-float{0%,to{transform:translate(0)}25%{transform:translate(2px,-3px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,3px)}}@media (prefers-reduced-motion:reduce){.bubble1_img,.bubble2_img,.bubble3_img{animation:none}.bubble1_text,.bubble2_text,.bubble3_text{transition:none}.bubble_text--visible{opacity:1}}.tips_text{color:#754d29;text-align:center;margin-top:calc(180 / var(--design-h) * 100%);font-size:14px}.bottom_tips{width:100%;height:calc(180 / var(--design-h) * 100%);position:absolute;bottom:0;left:0}.Tips{box-sizing:border-box;text-align:left;color:#754d29;width:100%;padding:0 5px;font-size:5px;line-height:5px;position:absolute;bottom:0;left:0;right:0}.page-d{height:100%;padding:calc(32 / var(--design-h) * 100%) 0 calc(48 / var(--design-h) * 100%);text-align:center;background-image:url(/assets/pure_bg-BmtwULkT.webp);background-position:bottom;background-repeat:no-repeat;background-size:cover;position:relative}.brand3{width:100%;top:calc(320 / var(--design-h) * 100%);z-index:999;position:absolute}.brand3 img{width:calc(768 / var(--design-w) * 100%);margin:0 auto;display:block}.shine_box{width:100%;height:calc(1233 / var(--design-h) * 100%);margin-top:calc(915 / var(--design-h) * 100%);background-image:url(/assets/shine_bg-CEMhQZc1.webp);background-position:top;background-repeat:no-repeat;background-size:cover}.shine_box_inner{width:100%;height:100%;margin-top:calc(-93 / var(--design-h) * 100%);position:relative}.star_img{width:400px;height:400px;position:absolute;top:-105px;right:-36px}.protein_img{object-fit:contain;width:150%;margin-top:-10%;margin-left:-25%;display:block;top:-50px}.test_img{object-fit:contain;width:100%;position:absolute;left:50%;transform:translate(-50%)}.hydrolysate_img,.hydrolysate_move_img{object-fit:contain;cursor:pointer;-webkit-tap-highlight-color:transparent;will-change:transform;width:100%;animation:3s ease-in-out infinite hydrolysate-float;position:absolute;right:0}.hydrolysate_move_img{width:98%;top:-4%;right:1%!important}.hydrolysate_move_img--pending{opacity:0;visibility:hidden;pointer-events:none}@keyframes hydrolysate-float{0%,to{transform:translate(0)}25%{transform:translate(1px,-2px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,2px)}}@media (prefers-reduced-motion:reduce){.hydrolysate_img,.hydrolysate_move_img{animation:none}}.page-e .brand3{width:100%;top:calc(320 / var(--design-h) * 100%);z-index:2;position:absolute}.page-e .brand3_img{width:calc(768 / var(--design-w) * 100%);margin:0 auto;transition:opacity .6s;display:block}.page-e .brand3_img--overlay{position:absolute;top:0;left:50%;transform:translate(-50%)}.page-e .brand3_img.is-visible{opacity:1}.page-e .brand3_img.is-hidden{opacity:0}.page-e{height:100%;padding:calc(32 / var(--design-h) * 100%) 0 calc(48 / var(--design-h) * 100%);text-align:center;color:#754d29;background-image:url(/assets/pure_bg-BmtwULkT.webp);background-position:bottom;background-repeat:no-repeat;background-size:cover;position:relative}.hydrolysate_box{width:100%;height:calc(1080 / var(--design-h) * 100%);top:calc(460 / var(--design-h) * 100%);position:absolute;overflow:hidden}.hydrolysate_bg,.decompose_img{width:100%;height:auto;margin-top:6%}.scan_swipe_area{touch-action:none;width:100%;height:100%;position:relative;overflow:hidden}.scan_img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:-2% 0 0}.scan_swipe_canvas{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.bubble_shine_box{width:calc(620 / var(--design-w) * 100%);height:calc(688 / var(--design-h) * 100%);top:calc(1060 / var(--design-h) * 100%);z-index:999;margin:auto;position:absolute;right:-8%}.bubble_shine_box_inner{width:100%;height:100%;position:relative;overflow:hidden}.bubble_star_img{object-fit:contain;float:right;width:150%;height:auto;position:absolute;top:-30%;right:-30%}.bubble_shine_img{object-fit:contain;-webkit-tap-highlight-color:transparent;will-change:transform;width:100%;height:auto;animation:4s ease-in-out infinite hydrolysate-float;position:absolute;top:0;right:0}@media (prefers-reduced-motion:reduce){.page-e .brand3_img{transition:none}}.protein_tips_text{text-align:center;color:#754d29;text-align:center;width:100%;bottom:calc(100 / var(--design-h) * 100%);font-size:16px;position:absolute}.protein_tips_text_bot{color:#754d29;text-align:left;width:100%;padding-left:10px;font-size:7px;position:absolute;bottom:0}.title{width:90%;position:absolute;top:27%;left:50%;transform:translate(-50%)}.title img{width:100%;display:block}.btn_login{width:60%;height:calc(460 / var(--design-h) * 100%);bottom:calc(-58 / var(--design-h) * 100%);cursor:pointer;background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;left:50%;transform:translate(-50%)}.page-f{height:100%;padding:calc(32 / var(--design-h) * 100%) 0 calc(48 / var(--design-h) * 100%);text-align:center;color:#754d29;background-image:url(/assets/pure_bg-BmtwULkT.webp);background-position:bottom;background-repeat:no-repeat;background-size:cover;position:relative}.brand6{width:100%;top:calc(320 / var(--design-h) * 100%);z-index:2;opacity:0;animation:.9s ease-out .3s forwards page-f-fade-in;position:absolute}.brand6_img{width:calc(674 / var(--design-w) * 100%);margin:0 auto;display:block}.milk_center{width:100%;height:100%;margin:auto;position:absolute;bottom:0;left:0;right:0}.milk_powder_img{opacity:0;width:100%;animation:.9s ease-out .3s forwards page-f-fade-in;position:absolute;bottom:-24px;left:50%;transform:translate(-50%)}.milk_tip{width:calc(348 / var(--design-w) * 100%);top:calc(680 / var(--design-h) * 100%);left:calc(40 / var(--design-w) * 100%);opacity:0;animation:.9s ease-out .3s forwards page-f-fade-in;position:absolute}.fly_bubble_img{width:calc(800 / var(--design-w) * 100%);top:calc(580 / var(--design-h) * 100%);right:calc(-190 / var(--design-w) * 100%);opacity:0;will-change:transform, opacity;animation:.9s ease-out .6s forwards fly-bubble-slide-in;position:absolute;transform:translate(100%)}.btn_finish_box{width:100%;bottom:calc(130 / var(--design-h) * 100%);margin:auto;position:absolute;left:0;right:0}.btn_finish{width:calc(494 / var(--design-w) * 100%)}.last_tips{color:#754d29;text-align:center;width:100%;font-size:6px;position:absolute;bottom:-1px}@keyframes page-f-fade-in{0%{opacity:0}to{opacity:1}}@keyframes fly-bubble-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion:reduce){.brand6,.milk_powder_img,.milk_tip,.fly_bubble_img{opacity:1;animation:none;transform:none}}@font-face{font-family:MElleHK-Medium;src:url(/assets/MElleHK-Medium-BFFUyUfY.ttf)format("opentype")}.app{color:#e8eaef;background:#0f1117;flex-direction:column;width:100%;height:100%;font-family:MElleHK-Medium;display:flex;position:relative}.logo{width:calc(214 / var(--design-w) * 100%);top:calc(38 / var(--design-h) * 100%);left:calc(38 / var(--design-w) * 100%);z-index:999;position:absolute}.logo img{width:100%;display:block}.video-transition-overlay{z-index:20;pointer-events:none;object-fit:contain;position:absolute}.app-header{color:#9aa3b2;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;font-size:14px;display:flex}.app-status{font-family:ui-monospace,Consolas,monospace;font-size:13px}.page-container{width:100%;height:100%;position:relative;overflow:hidden}.page-a.page-content,.page-b.page-content{padding:0;display:block;position:relative;overflow:hidden}.page{transform-origin:50%;will-change:transform, opacity;position:absolute;inset:0}.page-content{height:100%;padding:calc(32 / var(--design-h) * 100%) calc(24 / var(--design-w) * 100%) calc(48 / var(--design-h) * 100%);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.page-b-scroll,.page-c-scroll{padding-top:calc(20 / var(--design-h) * 100%);justify-content:flex-start;overflow-y:auto}.page-b-back,.page-c-back{margin-top:20px}.page-badge{letter-spacing:.04em;text-transform:uppercase;background:#ffffff0f;border:1px solid #ffffff26;border-radius:999px;margin-bottom:16px;padding:6px 12px;font-size:13px;display:inline-block}.page-content h1{margin:0 0 calc(12 / var(--design-h) * 100%);font-size:calc(48 / var(--design-w) * 100%);color:#fff;font-weight:600}.page-desc{max-width:90%;margin:0 0 calc(28 / var(--design-h) * 100%);font-size:calc(26 / var(--design-w) * 100%);color:#ffffffbf;line-height:1.6}.nav-button{appearance:none;border-radius:calc(12 / var(--design-w) * 100%);padding:calc(14 / var(--design-h) * 100%) calc(28 / var(--design-w) * 100%);font-size:calc(28 / var(--design-w) * 100%);color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;font-weight:600;transition:transform .15s,opacity .15s}.nav-button:hover:not(:disabled){transform:translateY(-1px)}.nav-button:disabled{opacity:.55;cursor:not-allowed}.nav-button-secondary{background:linear-gradient(135deg,#059669,#10b981)}.page-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px;display:flex}.demo-list{margin:0 0 calc(28 / var(--design-h) * 100%);width:calc(360 / var(--design-w) * 100%);text-align:left;padding:0;list-style:none}.demo-list li{color:#ffffffd9;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:14px 16px}.demo-list li+li{margin-top:10px}.demo-cards{gap:calc(14 / var(--design-h) * 100%);width:calc(720 / var(--design-w) * 100%);max-width:100%;margin-bottom:calc(8 / var(--design-h) * 100%);grid-template-columns:1fr;display:grid}.demo-card{text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:14px;flex-direction:column;gap:6px;padding:16px;display:flex}.demo-card strong{color:#fff;font-size:15px}.demo-card span{color:#ffffffa6;font-size:13px;line-height:1.5}