@font-face{font-family:'Poppins Demo';src:url('./public/fonts/Poppins-ExtraBold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'ErYa Demo';src:url('./public/fonts/eryaxindahei-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

.design-demo{--demo-scale:1;--demo-width:1920px;--demo-height:1756px;--mobile-card-zoom:.55;background:#000;overflow:hidden}
.demo-scene-wrap{position:relative;width:var(--demo-width);height:var(--demo-height);margin-inline:auto}
.demo-scene{position:absolute;left:0;top:0;width:1920px;height:1756px;transform:scale(var(--demo-scale));transform-origin:0 0}
.demo-title{position:absolute;top:221px;left:0;width:100%;color:#fff;text-align:center;font:400 180px/1.1 Righteous;letter-spacing:-.03em;white-space:nowrap}
.demo-cards{position:absolute;inset:0;pointer-events:none}
.demo-card-frame{position:absolute;left:0;top:0;width:300px;height:300px;pointer-events:none;perspective:800px;transform:translate(810px,819px) rotate(0deg);transform-origin:center;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.design-demo.is-expanded .demo-card-frame{pointer-events:auto;transform:translate(var(--demo-x),var(--demo-y)) rotate(var(--demo-rotate))}
.demo-card-frame:hover{z-index:9}
.demo-card{position:relative;display:block;width:300px;height:300px;border-radius:40px;overflow:hidden;color:#fff;pointer-events:none;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--tilt-scale,1));transform-style:preserve-3d;backface-visibility:hidden;transition:border-radius .35s ease,background .35s ease}
.design-demo.is-expanded .demo-card{pointer-events:auto}
.demo-card.is-tilting{will-change:transform}
.demo-card:is(:hover,:focus-visible){border-radius:45.34px}
.demo-card:focus-visible{outline:3px solid #fff;outline-offset:5px}
.demo-web-frame{--demo-x:605px;--demo-y:599px;--demo-rotate:-8.066deg;z-index:5}
.demo-duo-frame{--demo-x:953px;--demo-y:550px;--demo-rotate:8.447deg;z-index:4}
.demo-care-frame{--demo-x:1105px;--demo-y:971px;--demo-rotate:-9.737deg;z-index:3}
.demo-checkout-frame{--demo-x:525px;--demo-y:977px;--demo-rotate:12.921deg;z-index:2}
.demo-amount-frame{--demo-x:795px;--demo-y:1142px;--demo-rotate:-3.769deg;z-index:1}
.demo-web{background:linear-gradient(180deg,#8962ff,#b49cff)}
.demo-duo{background:linear-gradient(180deg,#3acdd8,#98f8ff)}
.demo-care{background:linear-gradient(180deg,#f0c710,#fff193 88.462%)}
.demo-checkout{background:linear-gradient(180deg,#ff6c80,#ffcad1)}
.demo-amount{color:rgba(0,0,0,.8);background:linear-gradient(180deg,#ffe7ea,#fff 74.519%)}
.demo-duo:is(:hover,:focus-visible){background:linear-gradient(180deg,#4bd6e0,#98f8ff)}
.demo-card-title{position:absolute;left:0;top:24.975px;z-index:2;display:block;width:100%;font:400 33.3px/1.1 'ErYa Demo',sans-serif;letter-spacing:-.333px;text-align:center;white-space:nowrap}
.demo-card-title strong{display:block;font:800 33.3px/1.1 'Poppins Demo',sans-serif;letter-spacing:-.999px}
.demo-card-title span{display:block}
.demo-web .demo-card-title,.demo-duo .demo-card-title{line-height:1.1}
.demo-care .demo-card-title,.demo-checkout .demo-card-title,.demo-amount .demo-card-title{top:23.31px}
.demo-amount .demo-card-title{color:rgba(0,0,0,.8)}
.demo-media{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;justify-content:center;width:var(--w);height:var(--h);transition:left .42s ease,top .42s ease,width .42s ease,height .42s ease,opacity .3s ease;pointer-events:none}
.demo-media img{display:block;flex:none;width:var(--iw);height:var(--ih);max-width:none;object-fit:cover;transform:rotate(var(--r,0deg));border-radius:var(--radius,0);transition:width .42s ease,height .42s ease,transform .42s ease}
.demo-card:is(:hover,:focus-visible) .demo-media{left:var(--hx,var(--x));top:var(--hy,var(--y));width:var(--hw,var(--w));height:var(--hh,var(--h))}
.demo-card:is(:hover,:focus-visible) .demo-media img{width:var(--hiw,var(--iw));height:var(--hih,var(--ih));transform:rotate(var(--hr,var(--r,0deg)))}
.web-product{--x:-14.32px;--y:118.42px;--w:205.729px;--h:185.625px;--iw:187.923px;--ih:165.02px;--r:-6.63deg;--radius:9.99px;--hx:-33px;--hy:111px;--hw:222.125px;--hh:204.085px;--hiw:191.584px;--hih:168.235px;--hr:-11.89deg}
.web-comments{--x:168.17px;--y:107.39px;--w:123.89px;--h:179.087px;--iw:101.565px;--ih:166.499px;--r:8.05deg;--radius:9.99px;--hx:166px;--hy:122px;--hw:142.215px;--hh:187.468px;--hiw:101.658px;--hih:166.511px;--hr:15.36deg}
.duo-phone{--x:-26.11px;--y:93.24px;--w:148.841px;--h:192.372px;--iw:128.204px;--ih:178.154px;--r:-6.96deg;--hx:-27.11px;--hy:91.6px;--hw:154.854px;--hh:200.559px;--hiw:133.332px;--hih:185.776px}
.duo-wide{--x:119.58px;--y:129.04px;--w:219.779px;--h:159.839px;--iw:219.779px;--ih:159.839px;--r:0deg;--hx:100.44px;--hy:117.11px;--hw:243.813px;--hh:183.784px;--hiw:234px;--hih:170px;--hr:3.45deg}
.demo-blob{position:absolute;display:block;max-width:none;pointer-events:none}
.duo-blob{left:48.31px;top:82.42px;width:327.72px;height:203.91px;transform:rotate(15deg);transition:width .42s ease,height .42s ease}
.demo-duo:is(:hover,:focus-visible) .duo-blob{width:369.33px;height:281.78px}
.demo-cloud,.demo-mascot{position:absolute;display:block;max-width:none;pointer-events:none;transition:left .42s ease,top .42s ease,width .42s ease,height .42s ease}
.demo-cloud{left:140.09px;top:115.72px;width:245.586px;height:123.209px}
.demo-mascot{left:-23.08px;top:54.95px;width:224.774px;height:244.754px}
.demo-care:is(:hover,:focus-visible) .demo-cloud{left:109.69px;top:115px;width:246.419px}
.demo-care:is(:hover,:focus-visible) .demo-mascot{left:-23.31px;top:47px;width:239px;height:260px}
.checkout-blob{left:-90.24px;top:46.26px;width:349.04px;height:233.94px;transform:rotate(-9.82deg) scaleX(-1);transition:width .42s ease,height .42s ease}
.demo-checkout:is(:hover,:focus-visible) .checkout-blob{width:383.83px;height:290.05px}
.checkout-panel{--x:23.24px;--y:135.7px;--w:315.516px;--h:118.214px;--iw:315.516px;--ih:118.214px;--r:0deg;--radius:16.65px;--hx:20.04px;--hy:129px;--hw:332.356px;--hh:135.078px;--hiw:328.208px;--hih:123.6px;--hr:-2.02deg}
.amount-panel{--x:26.64px;--y:124.875px;--w:246.419px;--h:125.707px;--iw:246.419px;--ih:125.707px;--r:0deg;--hx:18.21px;--hy:119.37px;--hw:263.577px;--hh:143.264px;--hiw:258px;--hih:132px;--hr:2.53deg}
.amount-arrow{--x:-39.47px;--y:28px;--w:119.5px;--h:119.5px;--iw:106.552px;--ih:106.552px;--r:-7.47deg;--hx:-45.05px;--hy:22.42px;--hw:130.663px;--hh:130.663px;--hr:-15.12deg;opacity:0}
.demo-amount:is(:hover,:focus-visible) .amount-arrow{opacity:1}
.demo-audio{position:absolute;left:810px;top:819px;z-index:10;display:block;width:300px;height:300px;padding:0;border:0;border-radius:40px;overflow:hidden;background:linear-gradient(180deg,rgba(212,212,212,.5),rgba(42,42,42,.5));-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);cursor:pointer}
.demo-audio:focus-visible{outline:3px solid #fff;outline-offset:6px}
.demo-wave{position:absolute;inset:0;display:block}
.demo-wave span{position:absolute;top:132px;width:13.5px;height:36px;border-radius:6.75px;background:#fcfcfc}
.demo-wave span:nth-child(1){left:39px}.demo-wave span:nth-child(2){left:60px}.demo-wave span:nth-child(3){left:81px}.demo-wave span:nth-child(4){left:102px}.demo-wave span:nth-child(5){left:123px}.demo-wave span:nth-child(6){left:144px}.demo-wave span:nth-child(7){left:165px}.demo-wave span:nth-child(8){left:186px}.demo-wave span:nth-child(9){left:207px}.demo-wave span:nth-child(10){left:228px}.demo-wave span:nth-child(11){left:249px}
.demo-tilt-tooltip{position:fixed;left:0;top:0;z-index:100;max-width:180px;padding:4px 10px;border-radius:4px;background:#fff;color:#2d2d2d;font:400 10px/1.4 Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-120%) rotate(var(--tooltip-rotate,0deg));transition:opacity .18s ease}
.demo-tilt-tooltip.is-visible{opacity:1}

@media(max-width:767px){
  .design-demo{padding:84px 20px 100px}
  .demo-scene-wrap{width:100%;height:auto}
  .demo-scene{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:auto;transform:none}
  .demo-title{position:relative;top:auto;left:auto;margin-bottom:70px;font-size:clamp(45px,11.8vw,72px)}
  .demo-audio{position:relative;left:auto;top:auto;flex:none;zoom:.733333}
  .demo-cards{position:relative;inset:auto;order:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:18px;width:100%;max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .9s cubic-bezier(.22,1,.36,1),margin-top .9s cubic-bezier(.22,1,.36,1),opacity .5s ease}
  .design-demo.is-expanded .demo-cards{max-height:1000px;margin-top:42px;opacity:1;pointer-events:auto}
  .demo-card-frame,.design-demo.is-expanded .demo-card-frame{position:relative;left:auto;top:auto;width:300px;height:300px;transform:none;zoom:var(--mobile-card-zoom)}
  .demo-card{will-change:auto}
  .demo-card-frame:nth-child(5){grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.demo-card-frame,.demo-card,.demo-media,.demo-media img,.demo-cloud,.demo-mascot,.demo-blob,.demo-cards{transition:none!important}.demo-card{transform:none!important;will-change:auto}.demo-tilt-tooltip{display:none}}