:root{color-scheme:dark;--bg: #08090c;--panel: #101116;--panel-2: #15161d;--line: #24252e;--text: #f1f2f5;--muted: #8a8d9a;--accent: #a78bfa;--accent-2: #7c5cfc;--body-w: 320px;--body-h: 664px;--bezel: 12px;--screen-radius: 34px;--body-radius: 47px;--rx: 0deg;--ry: 0deg;--zoom: 1;--view-zoom: 1;--floor-opacity: .5}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:grid;grid-template-columns:320px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px;flex:none;padding:0 18px;border-bottom:1px solid var(--line);background:#08090cd1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:30}.topbar-brand{display:flex;align-items:center;gap:10px;min-width:0}.topbar-brand .brand-mark{width:32px;height:32px;border-radius:9px;font-size:16px}.topbar-brand strong{display:block;font-size:14px;letter-spacing:-.01em}.topbar-brand small{display:block;margin-top:1px;color:var(--muted);font-size:10px}.topbar-actions{display:flex;align-items:center;gap:10px}.workspace-tabs{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.workspace-tabs button{padding:6px 15px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:11.5px;font-weight:600;cursor:pointer}.workspace-tabs button:hover{color:var(--text)}.workspace-tabs button.active{background:var(--text);color:var(--bg);box-shadow:0 1px 5px #00000029}.workspace-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workspace-tabs button:disabled{opacity:.4;cursor:not-allowed}.topbar-pill{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;white-space:nowrap}.icon-btn{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);cursor:pointer}.icon-btn:hover{color:var(--text);border-color:#3a3b47}.topbar-action{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer}.topbar-action:hover{color:var(--text);border-color:#3a3b47}.theme-icon.moon,html[data-theme=light] .theme-icon.sun{display:none}html[data-theme=light] .theme-icon.moon{display:block}.sidebar>.panel{order:10}#sourcePanel{order:1}#presetPanel{order:2}#devicePanel{order:3}#scenePanel{order:4}#anglePanel{order:5}#backgroundPanel{order:6}#environmentPanel{order:7}#logoPanel{order:8}#scrollPanel{order:9}#capturePanel{order:10}#exportPanel{order:11}.scene-devices{display:grid;gap:6px}.scene-device{display:grid;gap:7px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:11.5px}.scene-device-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.scene-device label{display:flex;align-items:center;gap:8px;cursor:pointer}.scene-device-scroll{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px;color:var(--muted);font-size:9.5px}.scene-device-scroll input[type=range]{width:100%;height:3px}.scene-device-scroll output{width:28px;text-align:right;font-size:9px}.scene-device-scroll .mini-btn{font-size:9px}.scene-device input{accent-color:var(--accent)}.device-hidden{display:none!important}.sidebar{display:flex;flex-direction:column;gap:2px;height:100%;min-height:0;padding:18px 16px 24px;background:linear-gradient(180deg,#0d0e13,#08090c 60%);border-right:1px solid var(--line);overflow-y:auto}.brand{order:0;display:flex;align-items:center;gap:11px;padding:2px 4px 18px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#0b0814;font-weight:800;font-size:17px;box-shadow:0 8px 24px #7c5cfc59}.brand strong{display:block;font-size:13.5px;letter-spacing:.01em}.brand small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}.panel{padding:16px 4px;border-top:1px solid var(--line)}.panel h2{margin:0 0 11px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.file-drop{display:grid;gap:4px;padding:18px 12px;border:1px dashed #343643;border-radius:11px;background:var(--panel);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.file-drop:hover,.file-drop.dragging{border-color:var(--accent);background:#171522}.file-drop span{font-weight:600;font-size:12px}.file-drop u{color:var(--accent);text-underline-offset:2px}.file-drop small{color:var(--muted);font-size:10.5px}.url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:8px}.url-row input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);outline:none}.url-row input:focus{border-color:#4b3f79}.btn{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-weight:600;font-size:12px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.btn:active{transform:translateY(1px)}.btn-ghost:hover{background:#1c1d26;border-color:#383a47}.btn-primary{width:100%;padding:12px;border:0;background:linear-gradient(180deg,#b49bff,#8668ff);color:#0c0718;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 30px #7c5cfc47}.btn-primary:hover{filter:brightness(1.06)}.btn-primary[disabled]{opacity:.55;cursor:progress}.hint{margin:8px 0 0;color:#6c6f7d;font-size:10.5px;line-height:1.5}.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.source-tabs{margin-bottom:8px}.device-seg,#reflection{grid-template-columns:repeat(3,1fr)}.seg button,.angles button{border:0;border-radius:6px;background:transparent;padding:8px 6px;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}.seg button.active,.angles button.active{background:#24212f;color:var(--text);box-shadow:inset 0 0 0 1px #3a3353}.presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.presets button{display:grid;gap:2px;padding:9px 9px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}.presets button span{color:var(--text);font-size:11.5px;font-weight:700}.presets button small{color:var(--muted);font-size:9.5px;letter-spacing:.03em}.presets button:hover{border-color:#383a47;background:#171821}.presets button.active{border-color:#5b4a9a;background:#1a1725;box-shadow:inset 0 0 0 1px #3a3353}.field input:disabled{opacity:.4;cursor:not-allowed}.video-export{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.video-export .btn{width:100%;margin-top:8px}.video-export .btn:disabled{opacity:.4;cursor:not-allowed}.preset-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.preset-actions .btn{padding:8px 6px;font-size:11px}.reset-btn{width:100%}.reset-btn:disabled{opacity:.4;cursor:not-allowed}#presetHint{margin-top:7px}.draggable{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.draggable.selected{z-index:30}.draggable.dragging,.draggable.resizing{z-index:31}.draggable.dragging,.draggable.dragging *{cursor:grabbing}.screen-select{position:absolute;inset:0;z-index:6;border:1.5px solid rgb(167 139 250 / .8);border-radius:inherit;box-shadow:inset 0 0 0 1px #00000059;pointer-events:none;opacity:.65;transition:opacity .15s,border-color .15s,box-shadow .15s}.draggable:hover .screen-select{opacity:1;border-color:#c4b5fd}.draggable.dragging .screen-select,.draggable.resizing .screen-select,.draggable.selected .screen-select{opacity:1;border-color:#ddd6fe;box-shadow:inset 0 0 0 1px #00000080,0 0 0 3px #a78bfa2e}.screen-resize{position:absolute;right:4px;bottom:4px;width:13px;height:13px;border:1.5px solid #ebe7ff;border-radius:4px;background:#7c5cfc;box-shadow:0 1px 5px #00000080;cursor:nwse-resize;pointer-events:none;opacity:0;transition:opacity .15s}.draggable:hover .screen-resize,.draggable.selected .screen-resize,.draggable.resizing .screen-resize{opacity:1;pointer-events:auto}.screen-select-label{position:absolute;top:6px;left:6px;padding:2px 6px;border-radius:5px;background:#0c0a14d1;color:#efeafe;font-size:8.5px;font-weight:700;line-height:1.3;letter-spacing:.07em;text-transform:uppercase}.phone-frame .screen-select-label,.black-phone .screen-select-label{top:4px;left:4px;padding:1px 4px;font-size:7px}.canvas.exporting .screen-select{display:none}.angles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:12px}.row{display:grid;grid-template-columns:58px minmax(0,1fr) 42px;align-items:center;gap:8px;margin-top:9px;color:var(--muted);font-size:11px}.row:first-of-type{margin-top:0}input[type=range]{width:100%;height:3px;accent-color:var(--accent);cursor:pointer}output{color:var(--text);text-align:right;font-variant-numeric:tabular-nums;font-size:10.5px}select{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);outline:none}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.swatch{aspect-ratio:1;border:1px solid #2c2d38;border-radius:8px;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff0a}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.bg-custom{display:flex;align-items:center;gap:6px;margin-top:10px}.custom-color{display:flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:10.5px;cursor:pointer}.custom-color input[type=color]{width:22px;height:22px;padding:0;border:0;border-radius:5px;background:none;cursor:pointer}.upload-chip{flex:1;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:10.5px;text-align:center;cursor:pointer}.upload-chip:hover,.custom-color:hover{border-color:#383a47;background:#15161d;color:var(--text)}.mini-btn{border:0;background:none;color:var(--muted);font-size:10px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.mini-btn:hover{color:var(--text)}.file-drop.compact{padding:13px 10px}.gradient-builder{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.gradient-colors{display:flex;gap:8px}.gradient-colors label{flex:1;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10.5px}.gradient-colors input[type=color]{width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}#gradApply{width:100%;margin-top:8px}.canvas-logo{position:absolute;z-index:12;max-width:60%;max-height:28%;object-fit:contain;pointer-events:none}.video-header{position:absolute;z-index:20;display:flex;max-width:82%;pointer-events:none}.video-header[hidden]{display:none!important}.video-header.pos-top-center{left:50%;top:4.5%;translate:-50% 0}.video-header.pos-top-left{left:5%;top:4.5%}.video-header.pos-top-right{right:5%;top:4.5%}.video-header .video-cta__pill{padding:.58em 1.2em;font-size:calc(clamp(14px,min(2.2vw,2vh),28px) * var(--overlay-size, 1));font-weight:600;letter-spacing:.015em;text-transform:none}.video-cta{position:absolute;z-index:20;display:flex;max-width:78%;pointer-events:none}.video-cta[hidden]{display:none!important}.video-cta.pos-bottom-center{left:50%;bottom:1.5%;translate:-50% 0}.video-cta.pos-bottom-left{left:5%;bottom:1.5%}.video-cta.pos-bottom-right{right:5%;bottom:1.5%}.video-cta.pos-lower-third{left:50%;bottom:13%;translate:-50% 0}.video-cta.pos-top-center{left:50%;top:11%;translate:-50% 0}.video-cta.pos-center{left:50%;top:50%;translate:-50% -50%}.video-cta__pill{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:.68em 1.35em;overflow:hidden;border:1px solid rgb(var(--overlay-border-rgb, 255 255 255) / var(--overlay-border-alpha, .18));border-radius:999px;background:rgb(var(--overlay-bg-rgb, 10 10 14) / var(--overlay-bg-alpha, .84));box-shadow:0 8px 32px #0000006b,inset 0 1px #ffffff1f;color:var(--overlay-text-color, #fff);font-size:calc(clamp(15px,min(2.6vw,2.2vh),34px) * var(--overlay-size, 1));font-weight:700;letter-spacing:.07em;line-height:1.15;text-align:center;text-transform:uppercase;text-shadow:var(--overlay-text-shadow, 0 2px 12px rgb(0 0 0 / .5));white-space:pre-line;overflow-wrap:anywhere;-webkit-backdrop-filter:var(--overlay-backdrop, blur(10px) saturate(140%));backdrop-filter:var(--overlay-backdrop, blur(10px) saturate(140%));will-change:transform,opacity}.fx-pulse{animation:cta-pulse 1.8s ease-in-out infinite}.fx-bounce{animation:cta-bounce 1.5s cubic-bezier(.28,.84,.42,1) infinite}.fx-shimmer{position:relative}.fx-shimmer:after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(100deg,transparent 38%,rgb(255 255 255 / .34) 50%,transparent 62%);transform:translate(-120%) skew(-18deg);animation:cta-shimmer 2.4s ease-in-out infinite;pointer-events:none}.fx-sway{animation:cta-sway 2.8s ease-in-out infinite}.fx-fade{animation:cta-fade 2.2s ease-in-out infinite}.fx-none{animation:none}@keyframes cta-pulse{0%,to{transform:scale(1);box-shadow:0 8px 32px #0000006b,inset 0 1px #ffffff1f}50%{transform:scale(1.065);box-shadow:0 12px 44px #00000080,0 0 0 6px #ffffff12,inset 0 1px #ffffff29}}@keyframes cta-bounce{0%,to{transform:translateY(0)}38%{transform:translateY(-11px)}56%{transform:translateY(-3px)}72%{transform:translateY(0)}}@keyframes cta-shimmer{0%,18%{transform:translate(-120%) skew(-18deg)}68%,to{transform:translate(120%) skew(-18deg)}}@keyframes cta-sway{0%,to{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}@keyframes cta-fade{0%,to{opacity:.52;transform:scale(.985)}50%{opacity:1;transform:scale(1)}}.check{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--muted);font-size:11.5px;cursor:pointer}.check input{accent-color:var(--accent)}.check+.check{margin-top:8px}.export-panel .btn+.btn{margin-top:7px}body.video-mode .sidebar{display:none}body.video-mode .app-body{grid-template-columns:400px minmax(0,1fr)}.video-panel{display:flex;flex-direction:column;height:100%;min-height:0;border-right:1px solid var(--line);background:linear-gradient(180deg,#0d0e13,#08090c 60%);overflow:hidden}.video-panel[hidden]{display:none!important}.video-panel-head{flex:none;padding:17px 16px 14px;border-bottom:1px solid var(--line)}.video-panel-head h2{margin:0;font-size:16px;letter-spacing:-.01em}.video-panel-head p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.4}.video-panel-body{flex:1;min-height:0;padding:16px;overflow-y:auto}.video-panel-foot{flex:none;padding:12px 16px 16px;border-top:1px solid var(--line);background:#0b0c10}.video-panel-foot .hint{margin:0 0 8px}.video-panel-foot .btn{width:100%}.workspace{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.canvas-viewport{flex:1;min-height:0;overflow:auto;background-color:#0b0c10;background-image:linear-gradient(45deg,#0f1016 25%,transparent 25%),linear-gradient(-45deg,#0f1016 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0f1016 75%),linear-gradient(-45deg,transparent 75%,#0f1016 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.canvas-stage{display:grid;place-items:center;width:max-content;height:max-content;min-width:100%;min-height:100%;padding:36px 28px 96px}.canvas-frame{position:relative;width:calc(var(--canvas-w, 760px) * var(--view-zoom));height:calc(var(--canvas-h, 960px) * var(--view-zoom));flex:none;transition:width .18s ease,height .18s ease}.canvas{position:absolute;top:0;left:0;width:var(--canvas-w, 760px);height:var(--canvas-h, 960px);overflow:hidden;background:radial-gradient(120% 90% at 50% 8%,#2b3550,#10131c 55%,#07080c);box-shadow:0 30px 80px #0000008c,inset 0 0 0 1px #ffffff0d;transform:scale(var(--view-zoom));transform-origin:top left;transition:transform .18s ease}.canvas.exporting{transform:none!important;transition:none!important}.canvas:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 45%,transparent 45%,rgb(0 0 0 / .25) 100%)}.canvas.transparent{background:transparent;box-shadow:none}.canvas.transparent:after{opacity:0}.scene{position:absolute;inset:0;display:grid;place-items:center;perspective:1200px;perspective-origin:50% 45%;transform:scale(var(--scene-scale, 1));transform-origin:center center;transition:transform .25s cubic-bezier(.22,.61,.36,1)}.rig{position:relative;z-index:2;display:grid;place-items:center;transform-style:preserve-3d}.device-wrap{transform:scale(var(--zoom));transform-style:preserve-3d}.device-body{position:relative;width:var(--body-w);height:var(--body-h);border-radius:var(--body-radius);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transform-origin:center center;background:transparent;transition:transform .35s cubic-bezier(.22,.61,.36,1),width .3s cubic-bezier(.22,.61,.36,1),height .3s cubic-bezier(.22,.61,.36,1),border-radius .3s cubic-bezier(.22,.61,.36,1)}.device-front{position:absolute;inset:0;z-index:1;box-sizing:border-box;padding:var(--bezel);border-radius:inherit;transform:translateZ(.5px);background:linear-gradient(148deg,#55555c,#1c1c20 24%,#2e2e34,#141417 76%,#4a4a52);box-shadow:0 0 0 1.5px #5b5b64,0 0 0 3px #101013,inset 0 0 0 1px #ffffff2e,inset 0 0 22px #000000bf;transition:background .2s,box-shadow .25s,padding .3s,border-radius .3s}.device-body[data-finish=white] .device-front{background:linear-gradient(148deg,#fff,#d9d9de 24%,#f7f7f9,#c9c9d0 76%,#fff);box-shadow:0 0 0 1.5px #fff,0 0 0 3px #b9b9c2,inset 0 0 0 1px #ffffffe6,inset 0 0 20px #0000002e}.device-body[data-finish=silver] .device-front{background:linear-gradient(148deg,#f8f8fb,#c7c7d0 26%,#f2f2f6 50%,#b4b4bf 76%,#e8e8ee);box-shadow:0 0 0 1.5px #f7f7fa,0 0 0 3px #9c9ca6,inset 0 0 0 1px #ffffffe6,inset 0 0 20px #00000029}.device-body[data-finish=titanium] .device-front{background:linear-gradient(148deg,#958f86,#4b4742 26%,#77726b 50%,#3a3733 76%,#8a857d);box-shadow:0 0 0 1.5px #a39d94,0 0 0 3px #514c46,inset 0 0 0 1px #ffffff24,inset 0 0 22px #00000073}.device-back{position:absolute;inset:0;z-index:0;border-radius:inherit;transform:translateZ(calc(var(--depth, 24px) * -1));background:linear-gradient(145deg,#33333a,#0b0b0e 32%,#1d1d22 62%,#070709);box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 0 22px #000000a6;pointer-events:none}.device-body[data-finish=white] .device-back{background:linear-gradient(145deg,#f7f7f9,#c3c3cb 34%,#ededf1 64%,#b4b4bd);box-shadow:inset 0 0 0 1px #fffc,inset 0 0 20px #0000001f}.device-body[data-finish=silver] .device-back{background:linear-gradient(145deg,#f2f2f6,#bfbfc9 34%,#ededf2 64%,#b0b0bb)}.device-body[data-finish=titanium] .device-back{background:linear-gradient(145deg,#77726a,#35322e 34%,#615c56 64%,#2d2a27)}.device-body[data-single-device=iphone] .device-back:after{content:"";position:absolute;top:14px;left:14px;width:34%;aspect-ratio:1 / 1.06;border-radius:26%;background:radial-gradient(circle at 31% 28%,#070709 0 12%,#34343c 13% 18%,transparent 19%),radial-gradient(circle at 31% 72%,#070709 0 12%,#34343c 13% 18%,transparent 19%),linear-gradient(145deg,#44444b,#151519 55%,#26262c);box-shadow:inset 0 0 0 1px #ffffff17,0 3px 8px #00000073}.device-depth{position:absolute;inset:0;transform-style:preserve-3d;border-radius:inherit;pointer-events:none}.device-body[data-finish=silver] .device-depth span{background:linear-gradient(90deg,#b9b9c3,#fbfbfd 46%,#c2c2cc)}.device-body[data-finish=titanium] .device-depth span{background:linear-gradient(90deg,#3b3833,#8b857c 46%,#423e39)}.device-depth span{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0a0a0c,#4a4a54 46%,#141418);transform:translateZ(calc(var(--depth, 24px) * -1 * var(--i)))}.device-body[data-finish=white] .device-depth span{background:linear-gradient(90deg,#b4b4bd,#f4f4f7 46%,#c9c9d0)}.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--screen-radius);background:radial-gradient(120% 100% at 30% 10%,#2b2140,#0b0912 65%),#000;box-shadow:inset 0 0 0 3px #050506,inset 0 0 18px #000000d9;transition:border-radius .3s cubic-bezier(.22,.61,.36,1)}.screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:7px;text-align:center;color:#b9b4d8;background:radial-gradient(100% 70% at 50% 20%,rgb(124 92 252 / .28),transparent 70%),linear-gradient(160deg,#1a1430,#09080f)}.placeholder strong{font-size:13px}.placeholder small{color:#6f6a8a;font-size:10.5px}.ph-icon{width:34px;height:34px;border-radius:11px;border:1.5px dashed #6a5fa0;margin-bottom:4px}.island{position:absolute;top:13px;left:50%;translate:-50% 0;width:31%;height:27px;border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px #ffffff0b;z-index:3;pointer-events:none}.glass{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgb(255 255 255 / .17) 0%,rgb(255 255 255 / .04) 24%,transparent 42%),linear-gradient(300deg,rgb(255 255 255 / .05),transparent 30%);opacity:1;transition:opacity .2s}.glass.off{opacity:0}.glass.studio{background:linear-gradient(118deg,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .08) 22%,transparent 40%),linear-gradient(300deg,rgb(255 255 255 / .12),transparent 30%)}.frame-gloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / .3),transparent 22%),linear-gradient(300deg,rgb(255 255 255 / .12),transparent 26%);mix-blend-mode:screen;opacity:.5}.hardware{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#0c0c0f,#6c6c75 45%,#111114);box-shadow:0 1px 3px #000000b3}.hardware.left{left:-3px}.hardware.right{right:-3px;width:3.5px}.btn-1{top:18%;height:26px}.btn-2{top:26%;height:48px}.btn-3{top:34%;height:48px}.btn-4{top:28%;height:72px}.floor-shadow{position:absolute;left:50%;top:calc(50% + var(--body-h) / 2 - 26px);width:calc(var(--body-w) * 1.16);height:110px;translate:-50% 0;transform:rotateX(76deg);transform-origin:center top;border-radius:50%;background:radial-gradient(ellipse at center,rgb(0 0 0 / .82),transparent 68%);filter:blur(18px);opacity:var(--floor-opacity);z-index:1;transition:opacity .25s,background .25s;pointer-events:none}.field{display:grid;gap:6px;margin-top:11px;color:var(--muted);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}.field input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:12px;letter-spacing:0;text-transform:none;outline:none}.field input:focus{border-color:#4b3f79}.caption-input-row{display:flex;align-items:center;gap:7px}.caption-input-row input{flex:1;min-width:0}.panel>.field:first-of-type{margin-top:0}.camera-dot{display:none;position:absolute;top:12px;left:50%;translate:-50% 0;width:7px;height:7px;border-radius:50%;background:#05050a;box-shadow:inset 0 0 0 1px #ffffff14;z-index:3;pointer-events:none}.duo-crease{display:none;position:absolute;top:0;bottom:0;left:50%;width:2px;translate:-1px 0;background:linear-gradient(180deg,#00000047,#ffffff1f,#00000047);z-index:3;pointer-events:none}.device-body[data-single-device=android] .island,.device-body[data-single-device=ipad] .island,.device-body[data-single-device=duo-closed] .island,.device-body[data-single-device=duo-open] .island{display:none}.device-body[data-single-device=android] .camera-dot{display:block;top:10px;width:9px;height:9px}.device-body[data-single-device=ipad] .camera-dot,.device-body[data-single-device=duo-closed] .camera-dot,.device-body[data-single-device=duo-open] .camera-dot{display:block}.device-body[data-single-device=ipad] .hardware,.device-body[data-single-device=watch] .hardware,.device-body[data-single-device=kiosk] .hardware,.device-body[data-single-device=watch] .island,.device-body[data-single-device=kiosk] .island{display:none}.watch-crown{display:none;position:absolute;right:-7px;top:36%;width:8px;height:34px;border-radius:4px;background:linear-gradient(180deg,#6d6d76,#26262b 45%,#0d0d10);box-shadow:0 0 0 1px #ffffff1f,0 2px 6px #00000080;z-index:5}.device-body[data-single-device=watch] .watch-crown,.device-body[data-single-device=duo-open] .duo-crease{display:block}.device-body[data-single-device=ipad] .camera-dot{width:9px;height:9px;top:10px}.device-body[data-single-device=duo-closed] .camera-dot,.device-body[data-single-device=duo-open] .camera-dot{top:8px;width:6px;height:6px}.canvas.studio .scene{display:none}.canvas.studio .trio{display:block}.trio{display:none;position:absolute;inset:0;z-index:3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.trio-laptop{position:absolute;left:50%;top:12%;width:50%;translate:-50% 0;filter:drop-shadow(0 24px 34px rgb(0 0 0 / .55))}.laptop-lid{position:relative;width:100%;aspect-ratio:16 / 10;padding:8px;border-radius:11px 11px 3px 3px;background:linear-gradient(148deg,#55555c,#1c1c20 26%,#2e2e34 55%,#121215 82%,#484850);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 0 22px #000000b3}.laptop-lid,.tablet-frame,.phone-frame,.monitor-frame{filter:drop-shadow(3px 4px 0 rgb(5 5 7 / .55))}.laptop-lid .screen{width:100%;height:100%;border-radius:4px;background:radial-gradient(120% 100% at 30% 10%,#2b2140,#0b0912 65%);box-shadow:inset 0 0 0 2px #050506}.laptop-screen img,.monitor-screen img{object-position:center top}.laptop-base{position:relative;width:112%;height:13px;margin-left:-6%;border-radius:2px 2px 10px 10px;background:linear-gradient(180deg,#5a5a63,#202024 48%,#0b0b0d);box-shadow:inset 0 1px #fff3,0 10px 22px #0000008c}.laptop-base span{position:absolute;top:0;left:50%;width:64px;height:4px;translate:-50% 0;border-radius:0 0 7px 7px;background:#08080a;box-shadow:inset 0 1px 2px #000c}.trio-tablet{position:absolute;right:10%;top:34%;width:16.5%;filter:drop-shadow(0 20px 28px rgb(0 0 0 / .55))}.tablet-frame{width:100%;aspect-ratio:3 / 4;padding:7px;border-radius:15px;background:linear-gradient(148deg,#55555c,#1c1c20 26%,#2e2e34 55%,#121215 82%,#484850);box-shadow:inset 0 0 0 1px #ffffff24,inset 0 0 18px #000000b3}.tablet-frame .screen{width:100%;height:100%;border-radius:8px;box-shadow:inset 0 0 0 2px #050506}.trio-phone{position:absolute;left:11%;top:44%;width:11%;filter:drop-shadow(0 18px 26px rgb(0 0 0 / .55))}.phone-frame{width:100%;aspect-ratio:393 / 852;padding:4px;border-radius:22px;background:linear-gradient(148deg,#55555c,#1c1c20 26%,#2e2e34 55%,#121215 82%,#484850);box-shadow:inset 0 0 0 1px #ffffff24,inset 0 0 16px #000000b3}.phone-frame .screen{width:100%;height:100%;border-radius:19px;box-shadow:inset 0 0 0 2px #050506}.phone-frame .island{top:5px;height:8px;width:32%}.trio[data-finish=white] .laptop-lid,.trio[data-finish=white] .tablet-frame,.trio[data-finish=white] .phone-frame{background:linear-gradient(148deg,#fff,#d9d9de 26%,#f7f7f9 55%,#c9c9d0 82%,#fff);box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 18px #0003}.trio[data-finish=silver] .laptop-lid,.trio[data-finish=silver] .tablet-frame,.trio[data-finish=silver] .phone-frame,.duo-scene[data-finish=silver] .laptop-lid,.duo-scene[data-finish=silver] .phone-frame,.black-scene[data-finish=silver] .tablet-frame,.black-scene[data-finish=silver] .phone-frame,.black-scene[data-finish=silver] .monitor-frame{background:linear-gradient(148deg,#fbfbfd,#c8c8d0 26%,#f4f4f7 55%,#b6b6bf 82%,#fff);box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 18px #00000024}.trio[data-finish=titanium] .laptop-lid,.trio[data-finish=titanium] .tablet-frame,.trio[data-finish=titanium] .phone-frame,.duo-scene[data-finish=titanium] .laptop-lid,.duo-scene[data-finish=titanium] .phone-frame,.black-scene[data-finish=titanium] .tablet-frame,.black-scene[data-finish=titanium] .phone-frame,.black-scene[data-finish=titanium] .monitor-frame{background:linear-gradient(148deg,#a8a29a,#57524c 26%,#8b857d 55%,#3f3b36 82%,#9a948c);box-shadow:inset 0 0 0 1px #ffffff24,inset 0 0 18px #0006}.trio[data-finish=silver] .laptop-base,.duo-scene[data-finish=silver] .laptop-base{background:linear-gradient(180deg,#fff,#d7d7dd 48%,#b9b9c2)}.trio[data-finish=titanium] .laptop-base,.duo-scene[data-finish=titanium] .laptop-base{background:linear-gradient(180deg,#9a948c,#5b5650 48%,#37342f)}.trio[data-finish=white] .laptop-base{background:linear-gradient(180deg,#fff,#d7d7dd 48%,#b9b9c2)}.trio-caption,.duo-caption{position:absolute;left:50%;bottom:7%;translate:-50% 0;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;text-shadow:0 2px 14px rgb(0 0 0 / .55)}.canvas.duo .scene,.canvas.duo .trio,.canvas.duo .black-scene{display:none}.canvas.duo .duo-scene{display:block}.duo-scene{display:none;position:absolute;inset:0;z-index:3}.duo-laptop{position:absolute;left:44%;top:16%;width:62%;translate:-50% 0;filter:drop-shadow(0 24px 34px rgb(0 0 0 / .55))}.duo-phone{position:absolute;right:8%;top:29%;width:13%;filter:drop-shadow(0 20px 30px rgb(0 0 0 / .55))}.duo-scene[data-finish=white] .laptop-lid,.duo-scene[data-finish=white] .phone-frame{background:linear-gradient(148deg,#fff,#d9d9de 26%,#f7f7f9 55%,#c9c9d0 82%,#fff);box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 18px #0003}.duo-scene[data-finish=white] .laptop-base{background:linear-gradient(180deg,#fff,#d7d7dd 48%,#b9b9c2)}.canvas.black .scene,.canvas.black .trio{display:none}.canvas.black .black-scene{display:block}.black-scene{display:none;position:absolute;inset:0;z-index:3}.black-monitor{position:absolute;left:57%;top:3%;width:56%;translate:-50% 0;z-index:1;filter:drop-shadow(0 26px 38px rgb(0 0 0 / .34))}.monitor-frame{width:100%;padding:10px 10px 0;border-radius:10px;background:linear-gradient(145deg,#35353a,#0a0a0c 32%,#1a1a1e 70%,#2b2b30);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 0 24px #000c}.monitor-screen{width:100%;height:auto;aspect-ratio:16 / 10;border-radius:2px;box-shadow:inset 0 0 0 2px #030304}.monitor-chin{height:44px;margin:0 -10px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#dedee3,#b6b6bd 46%,#8b8b92);display:grid;place-items:center}.monitor-chin:after{content:"";width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9c9cf 48%,#8b8b92);opacity:.55}.monitor-neck{width:19%;height:50px;margin:0 auto;background:linear-gradient(90deg,#84848b,#e8e8ec 45%,#9a9aa1);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}.monitor-foot{width:44%;height:11px;margin:-2px auto 0;border-radius:999px;background:linear-gradient(180deg,#f1f1f4,#b9b9c0 45%,#77777e);box-shadow:0 8px 18px #00000047}.black-tablet{position:absolute;left:14%;top:25%;width:17%;z-index:2;filter:drop-shadow(0 20px 30px rgb(0 0 0 / .28))}.black-tablet .tablet-frame{aspect-ratio:3 / 4;padding:7px 7px 25px;border-radius:18px}.black-phone{position:absolute;left:24.5%;top:48%;width:9.5%;z-index:3;filter:drop-shadow(0 18px 28px rgb(0 0 0 / .3))}.black-phone .phone-frame{aspect-ratio:393 / 852;padding:4px 4px 24px;border-radius:24px}.black-phone .island{display:none}.home-button{position:absolute;left:50%;bottom:6px;width:17px;height:17px;translate:-50% 0;border-radius:50%;border:1.5px solid #3b3b42;background:#0b0b0e;box-shadow:inset 0 0 3px #000000e6,0 0 0 1px #ffffff0d}.black-scene[data-finish=white] .monitor-frame,.black-scene[data-finish=white] .tablet-frame,.black-scene[data-finish=white] .phone-frame{background:linear-gradient(148deg,#fff,#d9d9de 26%,#f7f7f9 55%,#c9c9d0 82%,#fff)}.black-scene[data-finish=white] .monitor-chin,.black-scene[data-finish=white] .monitor-neck,.black-scene[data-finish=white] .monitor-foot{background:linear-gradient(180deg,#fff,#d7d7dd 48%,#b9b9c2)}.modal-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#000000b8;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.modal{width:min(720px,96vw);max-height:90vh;overflow:auto;border:1px solid #2c2d38;border-radius:16px;background:#0f1014;box-shadow:0 30px 90px #000000a6}.modal-head{display:flex;justify-content:space-between;gap:16px;padding:20px 20px 16px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font-size:18px;letter-spacing:-.01em}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:11.5px}.modal-close{align-self:flex-start;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:18px;line-height:1;cursor:pointer}.modal-close:hover{color:var(--text);border-color:#3a3b47}.modal-body{padding:18px 20px}.modal-section{margin-bottom:18px}.modal-section h3{margin:0 0 8px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.motion-grid,.format-grid{display:grid;gap:7px}.motion-grid{grid-template-columns:1fr 1fr}.format-grid{grid-template-columns:repeat(3,1fr)}.motion-grid button,.format-grid button{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#14151b;color:var(--text);text-align:left;cursor:pointer}.motion-grid button strong,.format-grid button strong{font-size:12px}.motion-grid button span,.format-grid button span{color:var(--muted);font-size:9.5px;line-height:1.35}.format-grid button{text-align:center}.motion-grid button:hover,.format-grid button:hover{border-color:#3a3b47}.motion-grid button.active,.format-grid button.active{border-color:#6d5ab5;background:#1b1728;box-shadow:inset 0 0 0 1px #41366a}.modal-options{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:11.5px}.modal-options select{width:auto;margin-left:6px}.modal-options .check{margin-top:0}.optional-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#1b1728;color:#b9a7ff;font-size:8.5px;letter-spacing:.1em}.cta-controls{display:grid;gap:9px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.cta-controls[hidden]{display:none}.cta-text-field,.cta-grid label{display:grid;gap:5px;color:var(--muted);font-size:11px}.cta-text-field input,.cta-text-field textarea,.cta-grid select,.pause-row input{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);outline:none}.cta-text-field textarea{min-height:52px;resize:vertical;font:inherit;line-height:1.35}.cta-text-field input:focus,.cta-text-field textarea:focus,.cta-grid select:focus,.pause-row input:focus{border-color:var(--accent)}.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cta-opacity{display:flex;align-items:center;gap:6px}.cta-opacity input{flex:1;min-width:0}.cta-opacity output{flex:none;min-width:30px;font-size:10px;text-align:right}.cta-color-field{display:grid;gap:5px;color:var(--muted);font-size:11px}.cta-color-field[hidden]{display:none}.cta-color-field input[type=color]{width:100%;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.pause-list{display:grid;gap:7px;margin-top:9px}.pause-row{display:grid;grid-template-columns:minmax(0,1fr) 74px auto;gap:7px;align-items:end;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}.pause-row.previewing{border-color:var(--accent);box-shadow:inset 0 0 0 1px #a78bfa40;background:var(--panel)}.pause-field{display:grid;gap:5px;min-width:0;color:var(--muted);font-size:10px}.pause-range{display:flex;align-items:center;gap:6px;min-width:0}.pause-range input[type=range]{flex:1;min-width:0}.pause-range output{flex:none;min-width:30px;font-size:10px}.pause-hold input{width:100%}.pause-row label{display:grid;gap:4px;color:var(--muted);font-size:10px}.pause-row input{width:100%}.pause-remove{width:31px;height:31px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:16px;line-height:1;cursor:pointer}.pause-remove:hover{border-color:#5a3442;color:#ff9bae}.pause-add{width:100%;margin-top:8px}#scrollPauseSummary{margin-top:8px}.speed-control{display:flex;align-items:center;gap:7px}.speed-control input[type=range]{width:100px;height:3px}.speed-control output{width:28px;text-align:right}.modal-foot{padding:14px 20px 18px;border-top:1px solid var(--line)}.modal-foot .btn{width:100%}.background-modal{width:min(860px,96vw);display:flex;flex-direction:column;overflow:hidden}.background-modal .modal-head,.background-modal .modal-foot{flex:none}.background-modal .modal-body{overflow:hidden;min-height:0}.modal-gallery{display:grid;grid-template-columns:repeat(4,1fr);align-content:start;gap:8px;max-height:min(560px,calc(90vh - 180px));padding-right:4px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.modal-gallery::-webkit-scrollbar{width:6px}.modal-gallery::-webkit-scrollbar-thumb{border-radius:99px;background:var(--line)}.modal-gallery .bg-thumb{border-radius:9px}.modal-gallery .bg-thumb span{font-size:9px;padding:12px 6px 4px}.modal-foot .btn:disabled{opacity:.55;cursor:progress}#renderVideo.rendering{display:flex;align-items:center;justify-content:center;gap:8px}#renderVideo.rendering:before{content:"";width:14px;height:14px;border:2px solid rgb(0 0 0 / .2);border-top-color:#0c0718;border-radius:50%;animation:busy-spin .8s linear infinite}@media(max-width:620px){.format-grid,.modal-gallery{grid-template-columns:1fr 1fr}.motion-grid{grid-template-columns:1fr}}.busy-indicator{position:absolute;right:20px;top:76px;z-index:55;display:flex;align-items:center;gap:10px;max-width:min(320px,calc(100vw - 40px));padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:0 14px 40px #0000004d;pointer-events:none}.busy-spinner{width:18px;height:18px;flex:none;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:busy-spin .8s linear infinite}.busy-copy{display:grid;gap:1px;min-width:0}.busy-copy strong{font-size:11.5px;color:var(--text)}.busy-copy small{overflow:hidden;color:var(--muted);font-size:10px;line-height:1.35;text-overflow:ellipsis}@keyframes busy-spin{to{transform:rotate(360deg)}}body.record-mode .busy-indicator{display:none!important}.canvas-toolbar{position:absolute;left:50%;bottom:42px;translate:-50% 0;z-index:40;display:flex;align-items:center;gap:4px;max-width:calc(100% - 32px);padding:5px 7px;border:1px solid var(--line);border-radius:10px;background:#0f0f0fe6;box-shadow:0 12px 32px #00000059;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow-x:auto}.tool-btn{display:grid;place-items:center;width:26px;height:26px;flex:none;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.tool-btn:hover{background:var(--panel-2);color:var(--text)}.tool-btn.active{background:#a78bfa24;color:var(--accent)}.tool-value{width:40px;flex:none;text-align:center;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.tool-divider{width:1px;height:16px;flex:none;margin:0 3px;background:var(--line)}.canvas-toolbar input[type=range]{width:92px;height:3px;flex:none;margin:0 2px}body[data-tool=pan] .canvas-viewport{cursor:grab}body[data-tool=pan] .canvas-viewport.panning{cursor:grabbing}.statusbar{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-top:1px solid var(--line);color:#656875;font-size:10.5px}body.record-mode{overflow:hidden;background:#000}body.record-mode .app,body.record-mode .app-body{display:block;height:100vh}body.record-mode .topbar,body.record-mode .sidebar,body.record-mode .statusbar,body.record-mode .toast,body.record-mode .screen-select,body.record-mode .canvas-toolbar{display:none!important}body.record-mode .workspace{height:100vh}body.record-mode .canvas-viewport{display:block;height:100vh;padding:0;background:#000;overflow:hidden}body.record-mode .canvas-stage{display:block;width:100vw;height:100vh;min-width:0;min-height:0;padding:0}body.record-mode .canvas-frame{width:100vw;height:100vh}body.record-mode .scene,body.record-mode .device-body,body.record-mode .trio,body.record-mode .duo-scene,body.record-mode .black-scene{transition:none!important}body.record-mode .canvas{position:absolute;top:0;left:0;width:100vw!important;height:100vh!important;transform:none!important;box-shadow:none}.record-sweep{position:absolute;inset:-20% -60%;z-index:30;pointer-events:none;background:linear-gradient(100deg,transparent 34%,rgb(255 255 255 / .28) 50%,transparent 66%);mix-blend-mode:screen;transform:translate(-120%) skew(-18deg)}.toast{position:fixed;left:50%;bottom:92px;translate:-50% 12px;padding:10px 16px;border:1px solid #343643;border-radius:9px;background:#17181f;box-shadow:0 12px 40px #00000073;font-size:12px;opacity:0;pointer-events:none;transition:opacity .18s,translate .18s;z-index:50}.toast.show{opacity:1;translate:-50% 0}@media(max-width:1000px){.app{height:auto;min-height:100vh;overflow:visible}.app-body{display:block;overflow:visible}.sidebar{height:auto;border-right:0;border-bottom:1px solid var(--line)}body.video-mode .video-panel{height:auto;max-height:none;border-right:0;border-bottom:1px solid var(--line)}body.video-mode .video-panel-body{overflow:visible}.workspace{min-height:70vh}.workspace-tabs button{padding:6px 11px}.canvas-stage{padding:16px 16px 84px}.topbar{height:54px;padding:0 12px}.topbar-pill{display:none}}html[data-theme=light]{color-scheme:light;--bg: #f3f4f8;--panel: #ffffff;--panel-2: #f3f3f8;--line: #e1e2ea;--text: #17181f;--muted: #6b6e7b;--accent: #6d4aff;--accent-2: #5a3cf0}html[data-theme=light] body{background:var(--bg)}html[data-theme=light] .topbar{background:#ffffffd1}html[data-theme=light] .video-panel{background:linear-gradient(180deg,#f8f8fb,#f1f2f7 60%)}html[data-theme=light] .video-panel-foot{background:#f8f8fb}html[data-theme=light] .sidebar{background:linear-gradient(180deg,#fff,#f6f6fa 70%)}html[data-theme=light] .canvas-viewport{background-color:#e9ebf2;background-image:linear-gradient(45deg,#dde0e9 25%,transparent 25%),linear-gradient(-45deg,#dde0e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dde0e9 75%),linear-gradient(-45deg,transparent 75%,#dde0e9 75%)}html[data-theme=light] .file-drop:hover,html[data-theme=light] .file-drop.dragging{background:#f5f1ff}html[data-theme=light] .presets button:hover,html[data-theme=light] .presets button.active{background:#f1ecff}html[data-theme=light] .presets button.active{border-color:#b9a7ff;box-shadow:inset 0 0 0 1px #d8ccff}html[data-theme=light] .seg button.active,html[data-theme=light] .angles button.active{background:#efeaff;color:#2c1d5c;box-shadow:inset 0 0 0 1px #d8ccff}html[data-theme=light] .btn-ghost:hover,html[data-theme=light] .custom-color:hover,html[data-theme=light] .upload-chip:hover{background:#f2f2f8;border-color:#cfd1dc}html[data-theme=light] .custom-color,html[data-theme=light] .upload-chip,html[data-theme=light] .file-drop{background:#fff}html[data-theme=light] .swatch{border-color:#d6d8e2}html[data-theme=light] .statusbar{color:#6b6e7b}html[data-theme=light] .hint{color:#7a7d89}html[data-theme=light] .toast{background:#fff;border-color:#dcdde6;box-shadow:0 12px 40px #1e1e3224}html[data-theme=light] .canvas-toolbar{background:#ffffffeb;border-color:#dcdde6;box-shadow:0 12px 32px #1e1e3229}html[data-theme=light] .modal-backdrop{background:#14141e59}html[data-theme=light] .modal{background:#fff;border-color:#dfe0e9;box-shadow:0 30px 90px #14142838}html[data-theme=light] .modal-head,html[data-theme=light] .modal-foot{border-color:var(--line)}html[data-theme=light] .modal-close{background:#f5f5fa}html[data-theme=light] .motion-grid button,html[data-theme=light] .format-grid button{background:#f7f7fb;border-color:#e0e1e9}html[data-theme=light] .motion-grid button.active,html[data-theme=light] .format-grid button.active{background:#f1ecff;border-color:#b9a7ff;box-shadow:inset 0 0 0 1px #d8ccff}html[data-theme=light] .tool-btn:hover{background:#f0f0f6}html[data-theme=light] .field input,html[data-theme=light] .url-row input,html[data-theme=light] select{background:#fff;border-color:#dcdee8}html[data-theme=light] .field input:focus,html[data-theme=light] .url-row input:focus{border-color:#b9a7ff}html[data-theme=light] .icon-btn:hover,html[data-theme=light] .topbar-action:hover{border-color:#cfd1dc}html[data-theme=light] .optional-tag{background:#f1ecff;color:#593bd6}body.record-mode{background:#000!important}.gallery-label{margin-top:12px;color:var(--muted);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.background-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:7px}.bg-thumb{position:relative;aspect-ratio:16 / 10;overflow:hidden;border:1px solid #2c2d38;border-radius:7px;background-size:cover;background-position:center;cursor:pointer}.bg-thumb span{position:absolute;left:0;right:0;bottom:0;padding:10px 4px 3px;background:linear-gradient(transparent,#000000ad);color:#fff;font-size:7.5px;font-weight:600;line-height:1.1;text-align:left}.bg-thumb.active{outline:2px solid var(--accent);outline-offset:2px}html[data-theme=light] .bg-thumb{border-color:#d6d8e2}html[data-view=landing]{scroll-behavior:smooth}html[data-view=landing] body{height:auto;min-height:100%;overflow-y:auto}html[data-view=landing] .app,html[data-view=app] .landing{display:none!important}.topbar-brand{color:inherit;text-decoration:none}.landing{--landing-max: 1180px;min-height:100vh;background:radial-gradient(80% 46% at 50% -4%,rgb(124 92 252 / .2),transparent 65%),radial-gradient(28% 28% at 100% 24%,rgb(45 212 191 / .07),transparent 72%),#08090c;color:var(--text)}.landing-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--landing-max);margin:0 auto;padding:17px 24px;border-bottom:1px solid rgb(255 255 255 / .065);background:#08090cb8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.landing-brand{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}.landing-brand .brand-mark{flex:none}.landing-brand strong{display:block;font-size:13px;letter-spacing:-.01em}.landing-brand small{display:block;margin-top:1px;color:var(--muted);font-size:9.5px}.landing-links{display:flex;align-items:center;gap:24px}.landing-links a{color:var(--muted);font-size:11.5px;text-decoration:none}.landing-links a:hover{color:var(--text)}.landing-actions{display:flex;align-items:center;gap:8px}.landing-theme{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);cursor:pointer}.landing-theme:hover{color:var(--text);border-color:#3a3b47}.landing-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 19px;border:1px solid transparent;border-radius:10px;background:linear-gradient(180deg,#c2adff,#8b6cff);box-shadow:0 12px 28px #7c5cfc38;color:#0c0718;font-size:12.5px;font-weight:750;text-decoration:none;cursor:pointer;transition:filter .15s,border-color .15s,background .15s}.landing-btn:hover{filter:brightness(1.07)}.landing-btn-small{height:34px;padding:0 14px;border-radius:8px;font-size:11.5px}.landing-btn-ghost{border-color:var(--line);background:#ffffff06;box-shadow:none;color:var(--text)}.landing-btn-ghost:hover{border-color:#403d52;background:#ffffff0e;filter:none}.landing-main{max-width:var(--landing-max);margin:0 auto;padding:0 24px 72px}.landing-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr);align-items:center;gap:42px;min-height:calc(100vh - 69px);padding:64px 0 72px}.landing-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#b8a8ff;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.landing-copy h1{max-width:690px;margin:19px 0 22px;font-size:clamp(43px,6vw,82px);font-weight:750;letter-spacing:-.055em;line-height:.97}.landing-copy h1 span{color:#c4b5fd}.landing-copy>p{max-width:540px;margin:0;color:#a3a5b1;font-size:15px;line-height:1.65}.landing-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:28px}.landing-note{display:flex;align-items:center;gap:8px;margin-top:20px!important;color:#727582!important;font-size:10.5px!important}.status-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade808c}.hero-art{position:relative;min-height:540px;isolation:isolate}.hero-art:before{content:"";position:absolute;inset:5% 2% 10%;border-radius:50%;background:radial-gradient(circle,rgb(124 92 252 / .28),transparent 66%);filter:blur(30px);z-index:-1}.hero-art:after{content:"";position:absolute;right:4%;bottom:4%;width:72%;height:12%;border-radius:50%;background:#0000008c;filter:blur(28px);transform:rotate(-3deg)}.hero-preview-label{position:absolute;top:0;right:4px;color:#5f6270;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase}.hero-window{position:absolute;top:52px;right:0;width:88%;overflow:hidden;border:1px solid #30313b;border-radius:15px;background:#101116;box-shadow:0 30px 80px #0000008c;transform:rotate(-2.4deg)}.hero-window-bar{display:flex;align-items:center;gap:5px;padding:11px 13px;border-bottom:1px solid #24252e}.hero-window-bar span{width:6px;height:6px;border-radius:50%;background:#3b3c46}.hero-window-bar em{margin-left:7px;padding:4px 9px;border:1px solid #292a33;border-radius:999px;background:#0b0c10;color:#747785;font-size:8px;font-style:normal;letter-spacing:.03em}.hero-site{position:relative;height:318px;padding:23px;overflow:hidden;background:radial-gradient(circle at 72% 30%,rgb(124 92 252 / .34),transparent 34%),radial-gradient(circle at 18% 76%,rgb(45 212 191 / .12),transparent 35%),linear-gradient(150deg,#171522,#0b0c11 68%)}.hero-site-nav{display:flex;gap:5px;margin-bottom:48px}.hero-site-nav i{width:24px;height:4px;border-radius:999px;background:#ffffff2b}.hero-site-copy{display:grid;gap:9px;max-width:184px}.hero-line{display:block;width:74%;height:6px;border-radius:999px;background:#ffffff38}.hero-line-short{width:30%;background:#8b6cff}.hero-line-long{width:92%;height:14px;background:#ffffffc7}.hero-line-mid{width:62%;background:#ffffff70}.hero-site-button{width:84px;height:25px;margin-top:8px;border-radius:999px;background:#c4b5fd}.hero-orb{position:absolute;top:28px;right:-30px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgb(255 255 255 / .5),transparent 18%),conic-gradient(from 220deg,#7c5cfc,#2dd4bf,#c4b5fd,#7c5cfc);opacity:.62;filter:blur(1px);-webkit-mask-image:radial-gradient(circle,#000 40%,transparent 72%);mask-image:radial-gradient(circle,#000 40%,transparent 72%)}.hero-card-row{position:absolute;left:23px;right:23px;bottom:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-card-row i{height:44px;border:1px solid rgb(255 255 255 / .1);border-radius:7px;background:#ffffff09}.hero-phone{position:absolute;left:8px;bottom:12px;z-index:2;width:182px;height:368px;padding:8px;border:1px solid #484954;border-radius:40px;background:linear-gradient(145deg,#3b3c45,#0a0a0d 42%,#25262d);box-shadow:0 30px 65px #0009;transform:rotate(3deg)}.hero-phone-notch{position:absolute;top:15px;left:50%;z-index:3;width:66px;height:14px;border-radius:999px;background:#08090c;translate:-50% 0}.hero-phone-screen{display:flex;flex-direction:column;gap:7px;width:100%;height:100%;padding:38px 13px 15px;overflow:hidden;border-radius:32px;background:radial-gradient(circle at 68% 27%,rgb(196 181 253 / .7),transparent 31%),linear-gradient(158deg,#201b32,#08090c 68%)}.hero-phone-kicker{width:30px;height:4px;border-radius:999px;background:#c4b5fd}.hero-phone-line{display:block;width:68%;height:5px;border-radius:999px;background:#ffffff42}.hero-phone-line-long{width:90%;height:11px;background:#fffc}.hero-phone-block{flex:1;margin-top:9px;border:1px solid rgb(255 255 255 / .12);border-radius:9px;background:linear-gradient(160deg,rgb(255 255 255 / .09),transparent 65%),#00000029}.hero-phone-button{width:74px;height:21px;margin-top:2px;border-radius:999px;background:#f4f1ff}.hero-badge{position:absolute;z-index:3;padding:8px 10px;border:1px solid #343540;border-radius:8px;background:#15161d;box-shadow:0 10px 25px #00000059;color:#dadbe2;font-size:8.5px;font-weight:750;letter-spacing:.12em}.hero-badge-png{top:13px;left:3%;rotate:-4deg}.hero-badge-mp4{right:1%;bottom:25%;rotate:3deg}.hero-badge-gif{left:43%;bottom:5%;rotate:-2deg}.landing-section{padding:76px 0;border-top:1px solid rgb(255 255 255 / .075);scroll-margin-top:80px}.landing-section-head{max-width:660px;margin-bottom:30px}.landing-section-head h2,.landing-final h2{margin:12px 0 13px;font-size:clamp(28px,3.5vw,46px);letter-spacing:-.04em;line-height:1.04}.landing-section-head p{max-width:570px;margin:0;color:#989ba8;font-size:13.5px;line-height:1.65}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.feature-card,.limit-card{padding:21px;border:1px solid rgb(255 255 255 / .085);border-radius:13px;background:linear-gradient(180deg,#ffffff09,#ffffff03)}.feature-icon{display:grid;place-items:center;width:35px;height:35px;margin-bottom:17px;border:1px solid #322b48;border-radius:9px;background:#191525;color:#c4b5fd}.feature-card h3,.workflow-grid h3,.limit-card h3{margin:0 0 7px;font-size:13px;letter-spacing:-.01em}.feature-card p,.limit-card p,.workflow-grid p{margin:0;color:#8e919e;font-size:11.5px;line-height:1.6}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:0;padding:0;list-style:none}.workflow-grid li{padding:21px;border-top:1px solid #322b48;background:linear-gradient(180deg,rgb(255 255 255 / .02),transparent)}.step-number{display:block;margin-bottom:22px;color:#8b6cff;font-size:10px;font-weight:700;letter-spacing:.12em}.video-showcase{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:46px}.video-showcase-copy>p{max-width:520px;margin:0;color:#989ba8;font-size:13.5px;line-height:1.65}.check-list{display:grid;gap:9px;margin:21px 0 24px;padding:0;list-style:none}.check-list li{position:relative;padding-left:21px;color:#c7c8d0;font-size:12px;line-height:1.5}.check-list li:before{content:"";position:absolute;top:4px;left:1px;width:9px;height:5px;border-bottom:1.5px solid #c4b5fd;border-left:1.5px solid #c4b5fd;transform:rotate(-45deg)}.timeline-card{padding:20px;border:1px solid #2d2e39;border-radius:15px;background:radial-gradient(90% 100% at 100% 0%,rgb(124 92 252 / .14),transparent 60%),#0d0e13;box-shadow:0 24px 60px #00000047}.timeline-head{display:flex;justify-content:space-between;gap:12px;color:#777a89;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}.timeline-track{position:relative;height:4px;margin:34px 6px 12px;border-radius:999px;background:#282933}.timeline-progress{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#7c5cfc,#c4b5fd)}.timeline-track i{position:absolute;top:50%;width:12px;height:12px;border:2px solid #d8ccff;border-radius:50%;background:#0b0c10;transform:translate(-50%,-50%)}.timeline-labels{display:flex;justify-content:space-between;color:#696c7a;font-size:8.5px}.timeline-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:30px}.timeline-tags span{padding:5px 8px;border:1px solid #2b2c37;border-radius:6px;color:#9699a6;font-size:8.5px}.limits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.limit-card{padding:20px;background:#0b0c10}.landing-final{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:48px 0 16px;border-top:1px solid rgb(255 255 255 / .075)}.landing-final h2{margin-bottom:0}.landing-footer{display:flex;justify-content:space-between;gap:16px;max-width:var(--landing-max);margin:0 auto;padding:24px 24px 38px;border-top:1px solid rgb(255 255 255 / .065);color:#6e7180;font-size:10px}.landing-footer a{color:#c4c5cd;text-decoration:none}.landing-footer a:hover{color:#fff}html[data-theme=light] .landing{background:radial-gradient(80% 46% at 50% -4%,rgb(124 92 252 / .12),transparent 65%),radial-gradient(28% 28% at 100% 24%,rgb(45 212 191 / .08),transparent 72%),#f7f7fb}html[data-theme=light] .landing-nav{border-color:#e3e4eb;background:#ffffffc7}html[data-theme=light] .landing .landing-brand small,html[data-theme=light] .landing .landing-links a,html[data-theme=light] .landing-section-head p,html[data-theme=light] .landing-copy>p,html[data-theme=light] .video-showcase-copy>p{color:#676b79}html[data-theme=light] .landing-copy h1 span{color:#7c5cfc}html[data-theme=light] .feature-card,html[data-theme=light] .limit-card{border-color:#e1e2ea;background:#fff}html[data-theme=light] .feature-icon{border-color:#ddd4ff;background:#f2edff;color:#6b4ee6}html[data-theme=light] .feature-card p,html[data-theme=light] .limit-card p,html[data-theme=light] .workflow-grid p{color:#6d7180}html[data-theme=light] .workflow-grid li{border-color:#ddd4ff;background:#ffffff9e}html[data-theme=light] .check-list li{color:#474a57}html[data-theme=light] .timeline-card{border-color:#dedfe8;background:radial-gradient(90% 100% at 100% 0%,rgb(124 92 252 / .1),transparent 60%),#fff;box-shadow:0 24px 60px #282a3c14}html[data-theme=light] .timeline-track{background:#e7e7ef}html[data-theme=light] .timeline-head,html[data-theme=light] .timeline-labels,html[data-theme=light] .timeline-tags span{color:#777b8a}html[data-theme=light] .timeline-tags span{border-color:#e0e1ea}html[data-theme=light] .landing-footer{border-color:#e3e4eb;color:#717585}html[data-theme=light] .landing-footer a{color:#3f424f}html[data-theme=light] .landing-theme{color:#626676;background:#fff}html[data-theme=light] .hero-window{border-color:#d9dae3;background:#fff;box-shadow:0 30px 80px #2b2d4224}html[data-theme=light] .hero-window-bar{border-color:#e5e6ed}html[data-theme=light] .hero-window-bar em{border-color:#e2e3eb;background:#f3f3f8;color:#767a89}html[data-theme=light] .hero-phone{border-color:#c6c7d2;background:linear-gradient(145deg,#fff,#cfd0da 44%,#f4f4f8);box-shadow:0 30px 65px #2b2d422e}html[data-theme=light] .hero-badge{border-color:#dedfe8;background:#fff;color:#4f5261}@media(max-width:1000px){.landing-links{display:none}.landing-hero{grid-template-columns:1fr;gap:28px;min-height:0;padding:58px 0 64px}.hero-art{width:min(100%,620px);min-height:520px;margin:0 auto}.feature-grid{grid-template-columns:repeat(2,1fr)}.video-showcase{grid-template-columns:1fr;gap:30px}.timeline-card{max-width:620px}}@media(max-width:680px){.landing-main{padding-right:18px;padding-left:18px}.landing-nav{padding:13px 18px}.landing-brand small,.landing-actions .landing-btn-small{display:none}.landing-copy h1{font-size:clamp(38px,12vw,56px)}.landing-copy>p{font-size:13.5px}.landing-hero{padding-top:44px}.hero-art{min-height:420px}.hero-window{top:44px;width:100%}.hero-site{height:262px}.hero-phone{width:136px;height:276px;border-radius:30px}.hero-phone-screen{padding:31px 10px 11px;border-radius:23px}.hero-phone-notch{top:11px;width:50px;height:11px}.hero-badge-gif{left:40%}.hero-preview-label{display:none}.landing-section{padding:54px 0}.feature-grid,.workflow-grid,.limits-grid{grid-template-columns:1fr}.landing-final{flex-direction:column;align-items:flex-start;padding-top:38px}.landing-footer{flex-wrap:wrap;padding:20px 18px 32px}}@media(max-width:760px){.topbar{gap:8px;padding:0 10px}.topbar-brand{flex:none;width:32px}.topbar-brand>span:last-child{display:none}.topbar-actions{gap:6px}.workspace-tabs button{padding:6px 10px}}.video-length-summary{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);color:var(--muted);font-size:10px;line-height:1.5}.canvas.exporting .video-header,.canvas.exporting .video-cta{display:none!important}.auth-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:#020308b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-dialog{width:min(460px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;position:relative;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);padding:26px;box-shadow:0 30px 90px #00000073}.auth-close{position:absolute;top:12px;right:14px;border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}.auth-close:hover{color:var(--text)}.auth-head{padding-right:20px}.auth-eyebrow{display:block;color:var(--accent);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.auth-head h2{margin:0 0 6px;font-size:23px;letter-spacing:-.02em}.auth-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:20px 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.auth-tabs button{border:0;border-radius:7px;background:transparent;color:var(--muted);padding:8px 10px;font:inherit;font-size:12px;cursor:pointer}.auth-tabs button.is-active{background:var(--panel);color:var(--text);box-shadow:0 1px 4px #00000040}.auth-form{display:grid;gap:12px}.auth-form label{display:grid;gap:6px;color:var(--muted);font-size:12px}.auth-form input{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);padding:10px 11px;font:inherit;font-size:14px}.auth-form input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}.auth-form .btn{width:100%;margin-top:2px}.auth-hint{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.auth-link{justify-self:start;border:0;background:transparent;color:var(--accent);padding:0;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.auth-message{margin:14px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--muted);padding:9px 11px;font-size:12px;line-height:1.45}.auth-message[data-tone=error]{border-color:color-mix(in srgb,#ef4444 45%,var(--line));color:#fca5a5}.auth-message[data-tone=success]{border-color:color-mix(in srgb,#22c55e 45%,var(--line));color:#86efac}.auth-account{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.auth-account strong{display:block;font-size:15px}.auth-account small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.auth-credits{border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--accent);padding:6px 10px;font-size:12px;white-space:nowrap}.auth-workspace{color:var(--muted);font-size:12px;margin:10px 0 0}.auth-actions{display:grid;gap:8px;margin-top:18px}.auth-actions .btn{width:100%}.topbar-pill{cursor:pointer}body.auth-open{overflow:hidden}