*{box-sizing:border-box}html{overflow:hidden}body{margin:0;width:1200px;height:760px;overflow:hidden;font:13px Figtree,system-ui;background:#f3f5f8;color:#334157}button{font:inherit;cursor:pointer}header{height:64px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e6eaf0}.motion-brand{display:flex;align-items:center;gap:12px;font-size:12px}.motion-brand img{width:28px}.motion-brand span{border-left:1px solid #e6e9ee;padding-left:12px;color:#8690a0}nav{display:flex;gap:3px;background:#f3f5f7;padding:4px;border-radius:7px}nav button{border:0;background:transparent;padding:8px 18px;border-radius:5px;font-size:11px;color:#919baa}nav button[aria-pressed=true]{background:#fff;box-shadow:0 2px 5px #1120310b;color:#334c6b}header>div:last-child{display:flex;gap:9px;align-items:center}header>div:last-child button{border:1px solid #e3e8ee;background:white;color:#7d8998;border-radius:5px;width:28px;height:28px}.publish{background:#293f5e;color:white;font-size:10px;padding:9px 15px;border-radius:5px;margin-left:9px}main{display:grid;grid-template-columns:210px 1fr;height:696px}aside{padding:28px 16px;background:#fff;border-right:1px solid #e2e7ed;position:relative}aside>p,.palette>p{font-size:8px;letter-spacing:1px;color:#96a1af;margin:0 0 20px}.block{display:flex;text-align:left;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid #e5eaf0;border-radius:8px;padding:13px 9px;margin-bottom:10px;color:#5a6e86;box-shadow:0 2px 5px #17293f03}.block>i{font-size:19px;font-style:normal;color:#8b9db3}.block>span{font-size:10px;font-weight:500}.block small{display:block;font-size:8px;font-weight:400;color:#a1aab6;margin-top:5px}.block>b{margin-left:auto;color:#b6bec9;font-weight:400}.block.active{border-color:#8199bc;background:#f3f6fb}.palette{border-top:1px solid #edf0f4;margin-top:27px;padding-top:24px}.palette>span{display:inline-block;border-radius:50%;width:21px;height:21px;border:3px solid #fff;box-shadow:0 0 0 1px #e5e8ed;margin-right:5px}.palette>small{display:block;font-size:9px;color:#a4acb6;margin-top:14px}.builder-status{position:absolute;bottom:25px;left:16px;right:16px;font-size:10px;line-height:1.7;color:#8d9bac}.canvas{padding:22px 24px}.canvas-bar{display:flex;justify-content:space-between;align-items:center;height:34px;color:#99a4b1;font-size:9px}.canvas-surface{position:relative;height:604px;background:#fff;border:1px solid #dce3eb;border-radius:9px;box-shadow:0 14px 35px -16px #29405b29;overflow:hidden}.empty-canvas{padding:24px;position:absolute;inset:0}.drop-zone{height:260px;border:1px dashed #d9e1ec;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b3becb;border-radius:7px;background:#fcfdfe;transition:background .3s,border-color .3s}.drop-zone>span{font-size:23px}.drop-zone>p{font-size:11px}#drop-grid{height:210px;margin-top:22px}.drop-zone.over{border-color:#8aa1c3;background:#eef3fa}.inserted-hero{position:absolute;top:24px;left:24px;right:24px;height:260px;background:#f1eee8;display:grid;grid-template-columns:1fr 1fr;border-radius:6px;overflow:hidden;animation:insert .5s ease}.inserted-hero>div{padding:45px 28px}.inserted-hero small{font-size:7px;letter-spacing:1px;color:#98a094}.inserted-hero h2{font-size:26px;line-height:1.1;font-weight:500;letter-spacing:-.8px;color:#566254;margin:20px 0}.inserted-hero p{font-size:9px;color:#9ca296}.inserted-hero img{width:100%;height:260px;object-fit:cover}.inserted-grid{position:absolute;top:306px;left:24px;right:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;animation:insert .5s ease}.inserted-grid>div{border:1px solid #edf0f4;border-radius:6px;overflow:hidden}.inserted-grid img{width:100%;height:125px;object-fit:cover}.inserted-grid i,.inserted-grid span{display:block;height:6px;width:60%;background:#e7ecf0;margin:12px;border-radius:3px}.inserted-grid span{width:35%;height:4px;background:#f0f2f5}.motion-result{position:absolute;inset:0;background:white;z-index:2;overflow:hidden;animation:insert .6s ease}.motion-result iframe{position:absolute;inset:0;width:1200px;height:800px;border:0;transform-origin:0 0;pointer-events:none}#drag-ghost{position:absolute;top:0;left:0;width:190px;height:58px;display:flex;gap:14px;align-items:center;padding:0 16px;background:white;border:1px solid #8fa5c2;border-radius:9px;box-shadow:0 18px 30px #1e3b6025;z-index:30;opacity:0;pointer-events:none}#drag-ghost span{font-size:23px;color:#8196b0}#drag-ghost b{font-size:10px;font-weight:500}#drag-ghost i{margin-left:auto;font-style:normal;color:#a4b2c1}#motion-cursor{position:absolute;top:0;left:0;z-index:31;pointer-events:none;opacity:0}[hidden]{display:none!important}button:focus-visible{outline:2px solid #2454e8;outline-offset:3px}@keyframes insert{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}