@supports not (width:1cqi){
:root{--cq-inline:".art,.a15,.v-emb,.ft-stage,.ft-lane,.acc-dev,.fl-area,.fl-game,.at-app";--cq-size:".mo-stage"}
.a15{top:calc(16 * var(--pcqi,1vw));width:calc(54 * var(--pcqi,1vw))}
.a15-in{padding-bottom:calc(4 * var(--cqi,1vw))}
.a15-bot{width:calc(34 * var(--cqi,1vw));height:calc(20 * var(--cqi,1vw))}
.a15-word{margin-top:calc(3.5 * var(--cqi,1vw));font-size:calc(9.4 * var(--cqi,1vw))}
.a15-num{font-size:calc(52 * var(--cqi,1vw));margin-top:calc(1 * var(--cqi,1vw))}
.hero-dev{right:calc(1 * var(--cqi,1vw));width:calc(47 * var(--cqi,1vw))}
.v-badge{padding-bottom:calc(5 * var(--cqi,1vw))}
.v-bot{width:calc(24 * var(--cqi,1vw));height:calc(14 * var(--cqi,1vw))}
.v-word{margin-top:calc(2.6 * var(--cqi,1vw));font-size:calc(7 * var(--cqi,1vw))}
.v-num{font-size:calc(40 * var(--cqi,1vw));margin-top:calc(1.5 * var(--cqi,1vw))}
.ft-lane{margin:0 calc(-2 * var(--pcqi,1vw))}
.tok{width:clamp(34px,calc(13 * var(--cqi,1vw)),58px);margin-top:clamp(-29px,calc(-6.5 * var(--cqi,1vw)),-17px)}
.tok-y i{font-size:clamp(9px,calc(3.4 * var(--cqi,1vw)),14px)}
.toast{padding:calc(3.6 * var(--cqi,1vw)) calc(4.6 * var(--cqi,1vw)) calc(3.6 * var(--cqi,1vw)) calc(15 * var(--cqi,1vw));border-radius:calc(6 * var(--cqi,1vw));font-size:calc(4.6 * var(--cqi,1vw))}
.toast::before{left:calc(4.2 * var(--cqi,1vw));width:calc(7.6 * var(--cqi,1vw));margin-top:calc(-3.8 * var(--cqi,1vw))}
.toast b{font-size:calc(4.9 * var(--cqi,1vw))}
.mo-stage{--dw:calc(38 * var(--cqh,1vh));--dh:calc(84 * var(--cqh,1vh));--rad:calc(6.2 * var(--cqh,1vh));--rim:calc(.9 * var(--cqh,1vh));--bz:calc(1.1 * var(--cqh,1vh))}
.bx-morph:has(#mo-tab:checked) .mo-stage{--dw:min(calc(94 * var(--cqi,1vw)),calc(128 * var(--cqh,1vh)));--dh:calc(min(calc(94 * var(--cqi,1vw)),calc(128 * var(--cqh,1vh))) * .62);--rad:calc(3.4 * var(--cqh,1vh));--bz:calc(2.4 * var(--cqh,1vh))}
.bx-morph:has(#mo-fold:checked) .mo-stage{--dw:calc(78 * var(--cqh,1vh));--dh:calc(76 * var(--cqh,1vh));--rad:calc(3.6 * var(--cqh,1vh));--bz:calc(1.2 * var(--cqh,1vh))}
.mo-shadow{bottom:calc(2 * var(--cqh,1vh));height:calc(5 * var(--cqh,1vh))}
.fl-win{padding:calc(1.3 * var(--cqi,1vw));border-radius:calc(4.4 * var(--cqi,1vw));translate:var(--fx,calc(31 * var(--cqi,1vw))) var(--fy,calc(150 * var(--cqi,1vw)))}
.fl-game{border-radius:calc(3.3 * var(--pcqi,1vw))}
.fg-hp{height:calc(2.2 * var(--cqi,1vw));border-radius:calc(2 * var(--cqi,1vw));box-shadow:0 0 0 calc(.35 * var(--cqi,1vw)) rgba(255,255,255,.75)}
.fg-slash{border-top:calc(1.4 * var(--cqi,1vw)) solid rgba(255,255,255,.95);border-right:calc(.6 * var(--cqi,1vw)) solid rgba(255,255,255,.5)}
.fg-dmg{font-size:calc(5 * var(--cqi,1vw));text-shadow:0 calc(.4 * var(--cqi,1vw)) 0 #e0566a,0 0 calc(1 * var(--cqi,1vw)) rgba(160,40,60,.45)}
.fg-d2{font-size:calc(4.2 * var(--cqi,1vw))}
.fg-lv{height:calc(2.4 * var(--cqi,1vw))}
.fg-lv::before{right:calc(6 * var(--cqi,1vw));height:calc(.4 * var(--cqi,1vw));margin-top:calc(-.2 * var(--cqi,1vw))}
.fg-lv i{width:calc(1.8 * var(--cqi,1vw));height:calc(1.8 * var(--cqi,1vw));box-shadow:0 0 0 calc(.35 * var(--cqi,1vw)) rgba(255,255,255,.6)}
.fg-lv b{font-size:calc(3.6 * var(--cqi,1vw));text-shadow:0 calc(.2 * var(--cqi,1vw)) calc(.6 * var(--cqi,1vw)) rgba(30,70,110,.4)}
.fg-coin{gap:calc(1 * var(--cqi,1vw));font-size:calc(3.6 * var(--cqi,1vw));text-shadow:0 calc(.2 * var(--cqi,1vw)) calc(.6 * var(--cqi,1vw)) rgba(30,70,110,.45)}
.fg-coin i{width:calc(3.4 * var(--cqi,1vw));height:calc(3.4 * var(--cqi,1vw));box-shadow:inset 0 0 0 calc(.6 * var(--cqi,1vw)) #f5a524}
.fg-sk{gap:calc(2.2 * var(--cqi,1vw))}
.fg-sk i{width:calc(7 * var(--cqi,1vw));height:calc(7 * var(--cqi,1vw));border:calc(.45 * var(--cqi,1vw)) solid rgba(255,255,255,.9)}
.fg-sk em{width:calc(4.4 * var(--cqi,1vw));height:calc(4.4 * var(--cqi,1vw));margin-left:calc(1 * var(--cqi,1vw));border:calc(.45 * var(--cqi,1vw)) solid rgba(255,255,255,.9)}
.fl-grip{top:calc(-.2 * var(--cqi,1vw));width:calc(13 * var(--cqi,1vw));height:calc(1.2 * var(--cqi,1vw));border-radius:calc(2 * var(--cqi,1vw))}
.va{font-size:clamp(7px,calc(1.5 * var(--cqi,1vw)),12px)}
@media (max-width:960px){.a15{top:14%;width:min(34vw,210px)}}
@media (max-width:960px){.hero-dev{right:auto;width:min(56vw,calc(56vh * 674 / 1436),320px);width:min(56vw,calc(56svh * 674 / 1436),320px)}}
@media (max-width:640px){.va{font-size:clamp(4px,calc(2.8 * var(--cqi,1vw)),10.5px)}}
}
@supports not (translate:0){
.dev::after{transform:translate(-50%,0)}
.btn-top:hover{transform:translate(0,-1px)}
.btn-top:active{transform:scale(.96)}
.rip{transform:translate(-50%,-50%) scale(0)}
.sh{transform:translate(calc(var(--mx,0) * var(--d) * 1px),calc(var(--my,0) * var(--d) * 1px))}
.sh3{transform:rotate(20deg)}
.chip:hover{transform:translate(2px,0)}
.btn-fill:hover{transform:translate(0,-3px)}
.btn-fill:hover svg{transform:translate(0,3px)}
.btn-tonal:hover{transform:translate(0,-3px)}
.btn-tonal:hover img{transform:rotate(-8deg)}
.btn-fill:active,.btn-tonal:active{transform:scale(.97)}
.shine::after{transform:translate(-120%,0)}
.art>*{transform:translate(calc(var(--mx,0) * var(--d,0) * 1px),calc(var(--my,0) * var(--d,0) * 1px))}
.a15-roll{transform:translate(0,-6.88em)}
.dlt:hover{transform:translate(0,-2px)}
.dlt:hover .dlt-go{transform:translate(0,3px)}
.dlt:active{transform:scale(.98)}
.dlt-qq:hover .dlt-go{transform:translate(3px,0)}
.get-qq:hover .qq-qr{transform:scale(1.04)}
.get-qq:hover .qq-go svg{transform:translate(3px,0)}
.qrp{transform:translate(-50%,10px) scale(.9)}
.qrp::after{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.dlq:hover .qrp,.dlq:focus-within .qrp{transform:translate(-50%,0) scale(1)}}
.dlt-ast:hover .dlt-go{transform:translate(3px,0)}
.dlt-soc:hover,.dlt-soc:active{transform:none}
.pxl-tip{transform:translate(-50%,0)}
.pxl-open{transform:translate(-50%,0)}
.scroll-cue{transform:translate(-50%,0)}
.mc-vm{transform:translate(calc(var(--W) * (var(--sx) + (var(--ex) - var(--sx)) * var(--tt))),calc(var(--H) * (var(--sy) + (var(--ey) - var(--sy)) * var(--tt)))) rotate(calc(var(--er) * var(--tt) * 1deg)) scale(calc(.4 + (var(--es) - .4) * var(--tt)))}
.mc-tag{transform:translate(-50%,0)}
.mc-vm .mc-tag{transform:rotate(calc(var(--er) * var(--tt) * -1deg)) scale(calc(1 / (.4 + (var(--es) - .4) * var(--tt))))}
.mc-halo{transform:translate(-50%,-50%) scale(calc(.6 + var(--p,1) * .7))}
.mc-pts{transform:translate(0,calc((1 - clamp(0,calc((var(--p,1) - .78) * 6),1)) * 18px))}
.v-emb{transform:translate(calc(-50% + var(--bx,0px) * var(--q,0)),calc(-50% + var(--by,0px) * var(--q,0))) scale(calc(1 - (1 - var(--bs,1)) * var(--q,0)))}
.v-cookie{transform:rotate(calc(var(--p,0) * 140deg))}
.v-roll{transform:translate(0,calc(var(--v,8) * -.84em))}
.v-ticks{transform:translate(-50%,0)}
.v-ticks img{transform:scale(.86)}
.v-ticks li.on img{transform:scale(1)}
.v-ticks li.cur img{transform:scale(1.28)}
.v-a7{transform:scale(.86)}
.motion .pin-a15 .v-end{transform:translate(0,calc((1 - var(--q,0)) * 50px))}
.motion .v-a7{transform:translate(calc((1 - var(--q,0)) * -60px),0) rotate(calc((1 - var(--q,0)) * -6deg))}
.motion .v-a15{transform:translate(calc((1 - var(--q,0)) * 80px),calc((1 - var(--q,0)) * 40px)) rotate(calc((1 - var(--q,0)) * 6deg))}
.pin-a15:not(.motion *) .v-emb{transform:none}
.feat:hover .fs{transform:rotate(60deg) scale(1.1)}
.feat:hover .ft-ic{transform:translate(0,-3px)}
.ft:has(.ft-out:checked) .seg2-thumb{transform:translate(100%,0)}
.acc:has(.acc-dev:hover) .acc-dev:not(:hover){transform:scale(.96)}
.toast{transform:translate(0,-40%)}
.prow:hover{transform:translate(0,-2px)}
.st-run,.st-on{transform:translate(-6px,0)}
.prow:has(.sw:checked) .pst .sys{transform:translate(6px,0)}
.mo-scr img{transform:scale(1.08)}
.bx-morph:has(#mo-phone:checked) .m-phone,.bx-morph:has(#mo-tab:checked) .m-tab,.bx-morph:has(#mo-fold:checked) .m-fold{transform:scale(1)}
.mo-hinge{transform:translate(-50%,0)}
.mo-shadow{transform:translate(-50%,0)}
.bx-morph:has(#mo-tab:checked) .seg3-thumb{transform:translate(100%,0)}
.bx-morph:has(#mo-fold:checked) .seg3-thumb{transform:translate(200%,0)}
.mo-cap span{transform:translate(0,8px)}
.bx-morph:has(#mo-phone:checked) .c-phone,.bx-morph:has(#mo-tab:checked) .c-tab,.bx-morph:has(#mo-fold:checked) .c-fold{transform:translate(0,0)}
.dial svg{transform:rotate(-90deg)}
.hz-pick label:active{transform:scale(.94)}
.fl-win{transform:translate(var(--fx,calc(31 * var(--cqi,1vw))),var(--fy,calc(150 * var(--cqi,1vw))))}
.fg-sk{transform:translate(-50%,0)}
.fl-grip{transform:translate(-50%,0)}
.fl-win.drag{transform:scale(1.04)}
.scene:hover .sc-ph .dev{transform:translate(0,-16px)}
.sc-tag{transform:translate(-50%,0)}
.scene:hover .sc-tag{transform:translate(-50%,-16px) scale(1.08)}
.pm:hover .pm-s{transform:rotate(90deg)}
.get-qq:hover{transform:translate(0,-4px)}
.bgx-bk{transform:rotate(180deg)}
.bgx-st.open .bgx-chev{transform:rotate(90deg)}
.bgx-btn.press,.bgx-btn:active{transform:scale(.94)}
.lk:hover svg{transform:translate(4px,0)}
.os:hover{transform:translate(0,-3px)}
.os:hover .os-go svg{transform:translate(3px,0)}
.va-ck.on i::after{transform:rotate(40deg)}
.va-btn.press,.va-btn:active,.va-dev.press,.va-sec.press{transform:scale(.97)}
.qa details[open] summary::after{transform:rotate(135deg)}
@media (max-width:960px){.art>*{transform:none}}
@keyframes flIntro-compat{0%,30%{transform:translate(var(--fx,calc(31 * var(--cqi,1vw))),var(--fy,calc(150 * var(--cqi,1vw)))) translate(calc(-1 * var(--fx,calc(31 * var(--cqi,1vw)))),calc(calc(70 * var(--cqi,1vw)) - var(--fy,calc(150 * var(--cqi,1vw))))) scale(1.515)}100%{transform:translate(var(--fx,calc(31 * var(--cqi,1vw))),var(--fy,calc(150 * var(--cqi,1vw)))) translate(0,0) scale(1)}}
.seen .fl-win{animation-name:flIntro-compat}
}
@supports not selector(:has(*)){
.ft.has-ft-in .seg2 label[for$="in"],.ft.has-ft-out .seg2 label[for$="out"]{color:var(--ink)}
@supports not (translate:0){.ft.has-ft-out .seg2-thumb{transform:translate(100%,0)}}
@supports (translate:0){.ft.has-ft-out .seg2-thumb{translate:100% 0}}
.ft.has-ft-in .ft-vm figcaption,.ft.has-ft-out .ft-host figcaption{background:var(--l100);color:var(--l600)}
.ft.has-ft-out .ft-arc path{animation-direction:reverse}
.ft.has-ft-out .tok,.ft.has-ft-out .tok-y{animation-direction:reverse}
.prow.has-sw .pst .sys{opacity:0}
@supports not (translate:0){.prow.has-sw .pst .sys{transform:translate(6px,0)}}
@supports (translate:0){.prow.has-sw .pst .sys{translate:6px 0}}
.prow.has-sw .st-run{animation:stRun .562s var(--ease) both}
.prow.has-sw .st-on{animation:stOn .225s var(--spring) .525s both}
.prow.has-sw .pbar{animation:pfill .562s var(--ease-io) both}
.prow.has-sw .plogo::after{animation:burst .45s var(--ease-out) .525s both}
.bx-morph.has-id-mo-tab .mo-stage{--dw:min(calc(94 * var(--cqi,1vw)),calc(128 * var(--cqh,1vh)));--dh:calc(min(calc(94 * var(--cqi,1vw)),calc(128 * var(--cqh,1vh))) * .62);--rad:calc(3.4 * var(--cqh,1vh));--bz:calc(2.4 * var(--cqh,1vh))}
.bx-morph.has-id-mo-fold .mo-stage{--dw:calc(78 * var(--cqh,1vh));--dh:calc(76 * var(--cqh,1vh));--rad:calc(3.6 * var(--cqh,1vh));--bz:calc(1.2 * var(--cqh,1vh))}
.bx-morph.has-id-mo-phone .m-phone,.bx-morph.has-id-mo-tab .m-tab,.bx-morph.has-id-mo-fold .m-fold{opacity:1;filter:blur(0);transition-delay:.135s}
@supports not (translate:0){.bx-morph.has-id-mo-phone .m-phone,.bx-morph.has-id-mo-tab .m-tab,.bx-morph.has-id-mo-fold .m-fold{transform:scale(1)}}
@supports (translate:0){.bx-morph.has-id-mo-phone .m-phone,.bx-morph.has-id-mo-tab .m-tab,.bx-morph.has-id-mo-fold .m-fold{scale:1}}
.bx-morph.has-id-mo-fold .mo-hinge{opacity:1;transition-delay:.45s}
.bx-morph.has-id-mo-phone label[for="mo-phone"],.bx-morph.has-id-mo-tab label[for="mo-tab"],.bx-morph.has-id-mo-fold label[for="mo-fold"]{color:var(--ink)}
@supports not (translate:0){.bx-morph.has-id-mo-tab .seg3-thumb{transform:translate(100%,0)}}
@supports (translate:0){.bx-morph.has-id-mo-tab .seg3-thumb{translate:100% 0}}
@supports not (translate:0){.bx-morph.has-id-mo-fold .seg3-thumb{transform:translate(200%,0)}}
@supports (translate:0){.bx-morph.has-id-mo-fold .seg3-thumb{translate:200% 0}}
.bx-morph.has-id-mo-phone .c-phone,.bx-morph.has-id-mo-tab .c-tab,.bx-morph.has-id-mo-fold .c-fold{opacity:1;transition-delay:.188s}
@supports not (translate:0){.bx-morph.has-id-mo-phone .c-phone,.bx-morph.has-id-mo-tab .c-tab,.bx-morph.has-id-mo-fold .c-fold{transform:translate(0,0)}}
@supports (translate:0){.bx-morph.has-id-mo-phone .c-phone,.bx-morph.has-id-mo-tab .c-tab,.bx-morph.has-id-mo-fold .c-fold{translate:0 0}}
.bx-hz.has-id-hz90 .dial{--hz:90}
.bx-hz.has-id-hz120 .dial{--hz:120}
.bx-hz.has-id-hz60 .d-vm::after{animation:dpA .45s var(--ease-out) .262s}
.bx-hz.has-id-hz90 .d-vm::after{animation:dpB .45s var(--ease-out) .262s}
.bx-hz.has-id-hz120 .d-vm::after{animation:dpC .45s var(--ease-out) .262s}
.bx-hz.has-id-hz60 .hz-dot{animation:hdA .38s var(--ease-io)}
.bx-hz.has-id-hz90 .hz-dot{animation:hdB .38s var(--ease-io)}
.bx-hz.has-id-hz120 .hz-dot{animation:hdC .38s var(--ease-io)}
.bx-hz.has-id-hz60 label[for="hz60"],.bx-hz.has-id-hz90 label[for="hz90"],.bx-hz.has-id-hz120 label[for="hz120"]{background:var(--g600);color:#fff;box-shadow:0 8px 16px -10px rgba(60,138,79,.9)}
}