.be-demo-studio{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:clamp(42px,7vw,110px);margin-bottom:clamp(110px,14vw,190px);padding:clamp(34px,5vw,72px);overflow:hidden;border:1px solid rgba(126,157,255,.2);border-radius:38px;background:radial-gradient(circle at 15% 14%,rgba(105,137,255,.17),transparent 32%),linear-gradient(145deg,rgba(14,24,44,.96),rgba(5,9,17,.98));box-shadow:0 45px 120px rgba(0,0,0,.38)}
.be-demo-studio:before{position:absolute;inset:0;content:"";pointer-events:none;background-image:linear-gradient(rgba(135,160,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(135,160,255,.055) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(110deg,#000,transparent 74%)}
.be-demo-story,.be-demo-console{position:relative;z-index:1}.be-demo-story>span{color:#8facff;font:800 10px/1 Manrope,sans-serif;letter-spacing:.18em}.be-demo-story h2{margin:30px 0 22px;color:#f5f7ff;font-size:clamp(3.2rem,5.8vw,6.6rem);line-height:.85;letter-spacing:-.06em}.be-demo-story h2 em{color:#aabaff;font-style:normal}.be-demo-story>p{max-width:590px;color:#a0acbe;font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.75}.be-demo-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:45px;border-block:1px solid rgba(132,158,255,.18)}.be-demo-facts div{padding:21px 0;border-inline-end:1px solid rgba(132,158,255,.18)}.be-demo-facts div:last-child{border:0}.be-demo-facts b,.be-demo-facts small{display:block}.be-demo-facts b{color:#edf2ff;font:800 clamp(.82rem,1.1vw,1.05rem)/1 Manrope,sans-serif;letter-spacing:.06em}.be-demo-facts small{margin-top:10px;color:#78869d;font-size:.73rem}.be-demo-mode-copy{margin-top:46px}.be-demo-mode-copy small{color:#77dfc1;font:800 10px/1 Manrope,sans-serif;letter-spacing:.14em}.be-demo-mode-copy p{margin:10px 0 0;color:#758299;font-size:.84rem}
.be-demo-console{align-self:start;padding:18px;border:1px solid rgba(145,169,255,.22);border-radius:28px;background:rgba(5,10,20,.78);box-shadow:0 28px 80px rgba(0,0,0,.3);backdrop-filter:blur(18px)}.be-demo-console-head{display:flex;align-items:center;justify-content:space-between;padding:4px 7px 18px;color:#9aacd6;font:800 9px/1 Manrope,sans-serif;letter-spacing:.14em}.be-demo-console-head span{display:flex;align-items:center;gap:10px}.be-demo-console-head i{width:8px;height:8px;border-radius:50%;background:#76e0bd;box-shadow:0 0 16px #76e0bd}.be-demo-console-head>small{color:#76e0bd}.be-demo-modes{display:grid;gap:8px}.be-demo-modes button{display:grid;grid-template-columns:44px 1fr;gap:15px;min-height:88px;padding:15px;border:1px solid rgba(130,154,231,.15);border-radius:18px;color:#e9edfa;background:rgba(255,255,255,.025);text-align:start;transition:.3s ease}.be-demo-modes button:hover,.be-demo-modes button.is-active{border-color:rgba(127,154,255,.58);background:linear-gradient(110deg,rgba(111,140,255,.15),rgba(111,225,191,.045));transform:translateX(-4px)}html[dir=ltr] .be-demo-modes button:hover,html[dir=ltr] .be-demo-modes button.is-active{transform:translateX(4px)}.be-demo-modes button>i{display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(145,169,255,.3);border-radius:13px;color:#89a5f9;font:800 9px/1 Manrope,sans-serif;font-style:normal}.be-demo-modes button span{display:grid;gap:7px}.be-demo-modes button b{font-size:1rem}.be-demo-modes button small{color:#77859b;font-size:.78rem;line-height:1.45}.be-demo-modes button.is-active small{color:#9facc1}.be-demo-create{display:flex;width:100%;min-height:68px;margin-top:14px;padding:0 22px;align-items:center;justify-content:space-between;border:0;border-radius:18px;color:#07101c;background:linear-gradient(135deg,#eef3ff,#97afff 62%,#77e0bf);box-shadow:0 16px 45px rgba(101,132,235,.18);cursor:pointer}.be-demo-create span{display:grid;gap:6px;text-align:start}.be-demo-create small{font:800 8px/1 Manrope,sans-serif;letter-spacing:.15em}.be-demo-create b{font-size:1rem}.be-demo-create>strong{font-size:1.45rem}.be-demo-create:disabled{cursor:wait;filter:saturate(.4);opacity:.7}.be-demo-error{min-height:18px;margin:10px 5px 0;color:#ff8896;font-size:.78rem}
.be-demo-result{display:grid;gap:12px;margin-top:7px;padding-top:17px;border-top:1px solid rgba(140,164,239,.17)}.be-demo-link{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px;border:1px solid rgba(117,224,190,.27);border-radius:17px;background:rgba(69,172,142,.07)}.be-demo-link span{display:grid;min-width:0;gap:6px}.be-demo-link small{color:#77dfc0;font:800 8px/1 Manrope,sans-serif;letter-spacing:.14em}.be-demo-link a{overflow:hidden;color:#e8eeff;font:700 .8rem/1.2 Manrope,sans-serif;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.be-demo-link>b{flex:0 0 auto;color:#77dfc0;font:800 1rem/1 Manrope,sans-serif}.be-demo-upload{display:grid;grid-template-columns:1fr auto;gap:12px;padding:17px;border:1px solid rgba(138,160,226,.17);border-radius:17px}.be-demo-upload>div{grid-row:span 2}.be-demo-upload small{color:#a8b6d0;font-weight:700}.be-demo-upload p{max-width:330px;margin:6px 0 0;color:#6f7d92;font-size:.72rem;line-height:1.45}.be-demo-upload label,.be-demo-upload button{display:grid;min-height:40px;place-items:center;padding:0 14px;border:1px solid rgba(145,169,255,.25);border-radius:12px;color:#bdc9e1;background:rgba(122,148,233,.08);font-weight:700;font-size:.75rem;cursor:pointer}.be-demo-upload input{position:absolute;width:1px;height:1px;opacity:0}.be-demo-upload button{border:0;color:#06101a;background:#a9bbff}.be-demo-upload button:disabled{color:#7d8799;background:#1a2333;cursor:not-allowed}.be-demo-upload-progress{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.be-demo-upload-progress>span{height:5px;overflow:hidden;border-radius:999px;background:#1a2435}.be-demo-upload-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#84a0ff,#70e0bc);transition:width .2s}.be-demo-upload-progress b{color:#92a9e7;font:800 10px/1 Manrope,sans-serif}.be-demo-actions{display:grid;grid-template-columns:1fr auto;gap:8px}.be-demo-actions a,.be-demo-actions button{display:flex;min-height:48px;align-items:center;justify-content:space-between;padding:0 16px;border:1px solid rgba(142,164,232,.2);border-radius:14px;color:#dce5fa;background:rgba(255,255,255,.035);text-decoration:none;font-weight:700;font-size:.78rem}.be-demo-actions button{cursor:pointer}.be-demo-actions a{border-color:rgba(118,224,190,.24)}
@media(max-width:1100px){.be-demo-studio{grid-template-columns:1fr;padding:45px}.be-demo-story h2{max-width:680px}.be-demo-mode-copy{display:none}}
@media(max-width:780px){.be-demo-studio{gap:32px;margin-inline:-2px;margin-bottom:100px;padding:25px 14px;border-radius:26px}.be-demo-story{padding:7px}.be-demo-story h2{margin-top:20px;font-size:clamp(3rem,15vw,5.1rem)}.be-demo-story>p{font-size:.94rem}.be-demo-facts{margin-top:30px}.be-demo-facts div{padding:17px 6px}.be-demo-facts b{font-size:.73rem}.be-demo-facts small{font-size:.62rem}.be-demo-console{padding:11px;border-radius:21px}.be-demo-modes button{grid-template-columns:38px 1fr;min-height:78px;padding:12px}.be-demo-modes button>i{width:38px;height:38px}.be-demo-modes button:hover,.be-demo-modes button.is-active{transform:none}.be-demo-create{min-height:62px;padding:0 17px}.be-demo-link{align-items:start}.be-demo-link>b{font-size:.82rem}.be-demo-upload{grid-template-columns:1fr}.be-demo-upload>div{grid-row:auto}.be-demo-upload label,.be-demo-upload button{min-height:46px}.be-demo-actions{grid-template-columns:1fr}.be-demo-actions a,.be-demo-actions button{min-height:50px}.be-demo-actions button{justify-content:center}}
@media(max-width:430px){.be-demo-story h2{font-size:3.35rem}.be-demo-facts b{letter-spacing:0}.be-demo-facts small{line-height:1.25}.be-demo-link{display:grid}.be-demo-link>b{grid-row:1;justify-self:end}.be-demo-link span{grid-row:1}.be-demo-modes button small{font-size:.7rem}}