.product-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:1.2;perspective:1600px;container-type:inline-size;container-name:scene}.product-scene:after{content:"";position:absolute;left:14%;right:3%;bottom:6%;height:5%;background:#173a2922;filter:blur(16px);border-radius:50%;z-index:-2}.scene-main{position:absolute;width:74%;left:12%;top:12%;z-index:3;transform:rotateY(-14deg) rotateX(4deg) rotate(3deg);transform-origin:50% 50%;filter:drop-shadow(12px 20px 13px #172d2d20)}.scene-main>.demo{border-radius:7px;border-color:#d8ded5}.scene-back{position:absolute;width:73%;left:0;top:23%;transform:rotateY(22deg) rotate(-7deg) scale(.9);z-index:1;filter:drop-shadow(4px 12px 10px #162f2726);pointer-events:none}.scene-back .demo{background:#0e3336;max-height:370px;overflow:hidden}.scene-back .admin-demo-layout{grid-template-columns:29% 1fr}.scene-back .admin-demo-main{background:#163d40;color:#fff}.scene-back .demo-chrome{background:#173a3d;color:#bbccc1}.scene-back .admin-demo-sidebar{display:flex}.scene-side{position:absolute;right:-2%;top:29%;width:28%;z-index:4;transform:rotateY(-15deg) rotate(4deg);filter:drop-shadow(7px 15px 11px #173c2e2b);pointer-events:none}.scene-shop .scene-side{z-index:2;top:26%;right:0;width:30%}.side-checkout{background:#fff;border:1px solid #dce1d5;border-radius:6px;padding:14px;font-size:8px;min-height:295px}.side-checkout>b{font-size:12px}.side-checkout small{font-size:5px;display:block;margin:12px 0}.side-checkout img{height:94px;object-fit:cover;width:100%;margin-bottom:12px}.side-checkout p{font-size:9px;margin-bottom:7px}.side-checkout strong{font-size:12px}.side-label{display:block;font-size:7px;margin:15px 0 5px}.side-checkout>i{display:block;border:1px solid #e1e5dc;height:17px;margin-bottom:5px}.side-confirm{display:block;background:var(--lime);color:var(--ink);padding:10px;text-align:center;font-size:8px;font-weight:700;margin-top:16px;border-radius:2px}.scene-pixel-cloud{position:absolute;inset:0;pointer-events:none;z-index:5}.scene-pixel-cloud i{position:absolute;width:clamp(7px,2.2cqw,17px);aspect-ratio:1;background:var(--lime);left:calc(6% + mod(var(--n)*41,92)*1%);top:calc(4% + mod(var(--n)*23,85)*1%);opacity:.75}.scene-pixel-cloud i:nth-child(3n){background:#26c1bd;width:12px}.scene-pixel-cloud i:nth-child(4n){background:#154f4c;width:8px}.scene-pixel-cloud i:nth-child(5n){opacity:.22;width:24px}.scene-canvas>.pixels{right:-1%;top:5%;transform:scale(.7)}.scene-canvas>.pixels-left{left:3%;bottom:3%;top:auto}.academy-landing{background:#092a2d;color:#fff;height:270px;border-radius:7px;padding:30px 24px;position:relative;overflow:hidden}.academy-landing>small{display:block;font-size:7px;letter-spacing:.12em;margin-bottom:18px}.academy-landing>b{font:400 27px/1.05 var(--serif);display:block;width:58%}.academy-landing>p{font-size:8px;width:48%;color:#bdc9bd;margin:15px 0}.academy-landing>span{display:inline-block;font-size:7px;background:var(--lime);padding:8px;color:var(--ink)}.academy-landing img{position:absolute;right:0;top:20%;height:80%;width:41%;object-fit:cover}.scene-course .scene-back{left:18%;top:3%;width:78%;transform:rotate(6deg);z-index:1}.scene-course .scene-main{left:0;top:31%;width:86%;transform:rotateY(10deg) rotate(-4deg)}.scene-course .scene-side{top:19%;right:0;width:22%;transform:rotateY(-12deg) rotate(5deg)}.course-player{background:#08272c;border:4px solid #163335;border-radius:8px;color:#fff;padding:14px}.player-heading{display:flex;justify-content:space-between;font-size:7px;padding:3px 1px 15px}.player-heading>b{font-size:9px}.player-content{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}.player-film{position:relative;padding-bottom:40px}.player-film>img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:3px}.player-film>b{display:block;font-size:11px;margin:10px 0}.play-symbol{position:absolute;left:42%;top:29%;width:36px;height:36px;background:#ffffff30;border:1px solid #fff8;border-radius:50%;display:grid;place-items:center}.play-symbol .icon{filter:invert(1);width:16px;height:16px}.player-track{height:3px;background:#5b7071;margin-top:12px}.player-track:before{content:"";display:block;background:var(--lime);width:32%;height:100%}.player-film>small{font-size:7px;float:right;margin-top:8px}.player-syllabus{font-size:8px;background:#0c3035;border-radius:3px;padding:13px 9px}.player-syllabus>b{font-size:9px;display:block;margin-bottom:17px}.player-syllabus>span{display:flex;align-items:center;gap:7px;padding:12px 0;border-bottom:1px solid #ffffff15;line-height:1.4}.player-syllabus i{font-size:7px;font-style:normal;color:var(--lime)}.mini-phone{background:#fff;border:5px solid #183133;border-radius:22px;padding:26px 12px 18px;position:relative;color:var(--ink);min-height:295px;overflow:hidden}.phone-speaker{position:absolute;width:34%;height:8px;top:0;left:33%;border-radius:0 0 7px 7px;background:#183133}.mini-phone>b{font-size:9px;display:block}.mini-phone strong{font-size:11px;line-height:1.3;display:block;margin:15px 0}.phone-progress{width:64px;height:64px;border:5px solid #d4e8dd;border-left-color:#5aaf91;border-bottom-color:#5aaf91;border-radius:50%;display:grid;place-items:center;font-size:12px;margin:22px auto}.phone-line{display:block;font-size:8px;padding:10px 0;border-bottom:1px solid #e9ece5}.scene-booking .scene-main{top:13%;left:3%;width:83%;transform:rotateY(-8deg) rotate(-2deg)}.scene-booking .scene-back{display:none}.scene-booking .scene-side{right:0;top:27%;width:25%;transform:rotate(3deg)}.confirm-check{display:grid;place-items:center;border:2px solid #b2cd6a;border-radius:50%;width:45px;height:45px;margin:14px auto;color:#7da342;font-size:24px}.confirmation-phone{text-align:center}.confirmation-phone p{font-size:8px;line-height:1.7}.confirmation-phone hr{border:0;border-top:1px solid #e5e8de;margin:20px 0}.confirmation-phone small{display:block;font-size:7px;margin-top:8px}.confirmation-phone .side-confirm{font-size:7px;padding-inline:5px;background:#f1f4e9}.scene-business .scene-main{left:0;top:12%;width:94%;transform:rotateY(-8deg) rotate(-1deg)}.scene-business .scene-back{display:none}.scene-business .scene-side{right:0;top:34%;width:25%;transform:rotate(4deg)}.website-phone strong{font:400 21px/1.03 var(--serif);margin-block:20px}.website-phone img{height:140px;width:100%;object-fit:cover}.website-phone p{font-size:7px;margin-top:12px}.scene-integrations .demo{width:100%;padding:8% 5% 0}.scene-integrations:after{display:none}.scene-custom .scene-main{top:32%;left:2%;width:80%;transform:rotate(-3deg)}.scene-custom .scene-back{top:2%;left:0;width:87%;transform:rotate(4deg)}.scene-custom .scene-side{top:10%;width:31%;right:-3%}.automation-panel{background:#fff;padding:18px 13px;border:1px solid #e2e6dc;border-radius:5px;font-size:8px}.automation-panel>b{display:block;margin-bottom:15px;font-size:10px}.automation-panel>span{display:flex;gap:8px;align-items:center;background:#f6f7f1;margin-bottom:10px;padding:12px 7px}.automation-panel i{height:8px;width:8px;background:#86c9c2}.automation-panel small{font-size:6px;display:block;margin-top:18px;color:var(--muted)}.scene-compact{min-width:520px;width:520px;transform:scale(.69);transform-origin:center}.scene-compact .scene-pixel-cloud i{opacity:.8}.scene-compact .scene-shop .scene-side{display:none}@media(prefers-reduced-motion:reduce){.product-scene *{animation:none!important}}@media(max-width:600px){.visual-stage>.pixels{right:0;max-width:60px;overflow:clip}.visual-stage>.pixels-left{left:0;right:auto}}.scene-canvas{position:absolute;inset:0 auto auto 0;width:640px;height:533px;transform:scale(calc(100cqw/640px));transform-origin:top left}.scene-pixel-cloud i{left:auto;right:calc(mod(var(--n)*7,11)*1%);top:calc(4% + mod(var(--n)*23,85)*1%)}.scene-pixel-cloud i:nth-child(2n){right:auto;left:calc(mod(var(--n)*3,9)*1%)}.scene-main .product-photo img{object-fit:contain;background:#dfdcd5}.scene-main .product-photo{background:#dfdcd5}.scene-custom .scene-main{top:32%;width:74%;left:5%}.scene-custom .scene-main .admin-demo-layout{min-height:0}.scene-custom .scene-main .admin-demo-main{padding:18px}.scene-custom .scene-main .dashboard-bottom{display:none}.scene-custom .scene-main .demo-table>div{padding-block:12px}.scene-custom .scene-main .admin-demo-heading{margin-bottom:15px}
