.canvasplex-embed{--cp-bg:#171923;--cp-panel:#20232d;--cp-line:#343744;--cp-text:#f5f5fa;--cp-muted:#9b9eae;--cp-violet:#8955ff;--cp-cyan:#46d5d5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cp-text);width:100%;max-width:100%;margin:0 auto}.canvasplex-embed *{box-sizing:border-box}.canvasplex-app{height:min(900px,90vh);min-height:600px;display:flex;flex-direction:column;background:var(--cp-bg);border-radius:14px;overflow:hidden;border:1px solid #343744;box-shadow:0 18px 60px #1114;font-size:13px}.canvasplex-app button,.canvasplex-app input,.canvasplex-app select{font:inherit}.canvasplex-app button{color:inherit;cursor:pointer}.cp-loading{margin:auto;color:#b9b0d3}.cp-top{height:58px;display:flex;align-items:center;gap:22px;padding:0 18px;background:#191b24;border-bottom:1px solid var(--cp-line);flex:0 0 auto}.cp-brand{display:flex;gap:9px;align-items:center;color:white;text-decoration:none;min-width:175px}.cp-brand b{font-size:16px;letter-spacing:-.5px}.cp-brand b span{color:#b7a1ff}.cp-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,#8955ff,#37c7d0);font-weight:800;font-size:19px}.cp-doc{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cp-docname{border:0;background:none;color:#f2f1f7;font-weight:650;width:min(230px,45%);outline:0}.cp-saved{font-size:11px;color:#cfad75;white-space:nowrap}.cp-saved.is-saved{color:#72d9b6}.cp-actions{display:flex;align-items:center;gap:8px}.cp-actions button,.cp-menubar button{border:0;background:transparent;border-radius:7px;padding:8px 10px}.cp-actions button:hover,.cp-menubar button:hover{background:#ffffff12}.cp-actions .cp-save{border:1px solid #4d4a60;font-size:11px}.cp-actions .cp-export,.cp-primary{background:var(--cp-violet);color:white;border:0;border-radius:8px;padding:10px 14px;font-weight:700}.cp-actions .cp-export:hover,.cp-primary:hover{background:#7440ed}.cp-menubar{height:38px;padding:0 18px;display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--cp-line);background:#20222b;flex:0 0 auto}.cp-menubar button{font-size:11px;color:#c7c7d1;padding:6px 10px}.cp-menubar>span{color:#888b9b;font-size:10px;margin-left:auto}.cp-mobile-menu{display:none!important}.cp-work{display:grid;grid-template-columns:54px minmax(0,1fr) 252px;min-height:0;flex:1}.cp-tools{background:#20232d;border-right:1px solid var(--cp-line);display:flex;flex-direction:column;align-items:center;padding:9px 5px;gap:4px}.cp-tools>button{border:0;background:transparent;color:#aeb0bf;border-radius:8px;width:40px;height:40px;position:relative;font-size:19px}.cp-tools>button:hover,.cp-tools>button.active{background:#383247;color:#c6adff}.cp-tools small{position:absolute;right:4px;bottom:2px;font-size:8px;color:#787b8b}.cp-colors{margin-top:auto;padding-bottom:10px}.cp-colors input{width:28px;height:28px;padding:2px;background:#30323d;border:1px solid #666;border-radius:6px}.cp-stage-wrap{display:flex;flex-direction:column;min-width:0;min-height:0;background:#171923}.cp-stage-head{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-bottom:1px solid #2a2c36;color:#a9aab7;font-size:10px}.cp-zoom{display:flex;align-items:center;gap:8px}.cp-zoom button{background:none;border:0;color:#ddd;font-size:16px}.cp-zoom span{min-width:38px;text-align:center}.cp-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;background-color:#292b34;background-image:linear-gradient(45deg,#32343d 25%,transparent 25%),linear-gradient(-45deg,#32343d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#32343d 75%),linear-gradient(-45deg,transparent 75%,#32343d 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.cp-stage.drag-over{outline:3px solid var(--cp-violet);outline-offset:-5px}.cp-crop-preview{position:absolute;z-index:3;border:2px dashed #fff;background:#8955ff26;box-shadow:0 0 0 9999px #08081066;pointer-events:none}.cp-crop-preview[hidden]{display:none}.cp-canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform:scale(var(--zoom-factor,1));background:transparent;box-shadow:0 12px 35px #0007;touch-action:none}.cp-empty{position:absolute;text-align:center;width:min(390px,88%);padding:30px 20px;background:#20212dcc;backdrop-filter:blur(14px);border:1px solid #ffffff20;border-radius:16px}.cp-empty[hidden]{display:none}.cp-empty-icon{height:52px;width:52px;border-radius:15px;display:grid;place-items:center;margin:auto;background:#8955ff2b;color:#bba6ff;font-size:26px}.cp-empty h2{font-size:19px;margin:14px 0 7px;color:#fff}.cp-empty p{font-size:12px;line-height:1.6;color:#b2b3c0;margin:0 0 18px}.cp-empty small{display:block;margin-top:14px;color:#989aa8;font-size:10px;line-height:1.5}.cp-options{height:52px;display:flex;align-items:center;gap:16px;padding:0 14px;background:#20232d;border-top:1px solid var(--cp-line);overflow:auto;white-space:nowrap;font-size:10px}.cp-tool-label{color:#cab9ff;font-weight:700}.cp-options label,.cp-props label{display:flex;align-items:center;gap:7px;color:#b6b7c3}.cp-options input[type=range],.cp-props input[type=range]{width:76px;accent-color:var(--cp-violet)}.cp-options b,.cp-props b{font-weight:500;color:white}.cp-options label:last-child{display:none}.cp-side{background:#20232d;border-left:1px solid var(--cp-line);display:flex;flex-direction:column;min-height:0}.cp-side-tabs{height:42px;display:flex;border-bottom:1px solid var(--cp-line)}.cp-side-tabs button{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:#9b9eae;font-size:11px}.cp-side-tabs button.active{color:#fff;border-color:var(--cp-violet)}.cp-layers{padding:8px;overflow:auto}.cp-layer{height:48px;display:flex;align-items:center;gap:7px;padding:5px;border-radius:7px;border:1px solid transparent}.cp-layer.selected{background:#342c48;border-color:#554276}.cp-eye,.cp-delete{border:0;background:transparent;color:#bfc0cd;font-size:13px;padding:4px}.cp-thumb{width:32px;height:32px;border:1px solid #4a4c58;background:linear-gradient(135deg,#343744,#55515f);display:grid;place-items:center;border-radius:4px;color:#d8ceff}.cp-layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:none;color:#e5e4eb;font-size:10px}.cp-delete{opacity:.55}.cp-delete:hover{opacity:1;color:#ff8793}.cp-layer-add{padding:8px;display:flex;gap:5px;border-top:1px solid var(--cp-line)}.cp-layer-add button{flex:1;border:1px solid #41434f;border-radius:6px;background:#292c36;padding:7px 2px;color:#c7c4d3;font-size:9px}.cp-props{padding:14px;color:#c3c4cf}.cp-props[hidden],.cp-layers[hidden],.cp-layer-add[hidden]{display:none}.cp-props h3{font-size:13px;color:#fff}.cp-props p{font-size:11px;color:#a3a5b4;line-height:1.5}.cp-props label{display:flex;flex-wrap:wrap;margin:18px 0}.cp-props input[type=range]{width:100%}.cp-help{margin-top:auto;border-top:1px solid var(--cp-line);padding:12px;display:flex;flex-direction:column;gap:4px}.cp-help b{font-size:10px;color:#c5b3ff}.cp-help span,.cp-help small{font-size:9px;color:#9b9eae}.cp-toast{position:absolute;z-index:20;bottom:18px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#202b28;border:1px solid #3d695b;color:#baf1dd;border-radius:8px;padding:11px 15px;box-shadow:0 8px 30px #0006;transition:.2s}.cp-toast.show{opacity:1;transform:translate(-50%,0)}.cp-modal-bg{position:fixed;inset:0;z-index:100000;background:#0b0b11b8;display:grid;place-items:center;padding:20px}.cp-modal{position:relative;width:min(430px,100%);background:#fff;color:#252332;border-radius:16px;padding:28px;box-shadow:0 25px 80px #0008}.cp-modal>small{color:#7950dc;font-size:10px;letter-spacing:.16em;font-weight:800}.cp-modal h2{font-size:23px;margin:8px 0}.cp-modal p{color:#777586;font-size:12px;line-height:1.5}.cp-modal label{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:12px;font-weight:700}.cp-modal select{border:1px solid #d9d8e2;border-radius:7px;padding:8px 25px 8px 10px;background:white}.cp-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:26px}.cp-modal-actions button{border-radius:8px;padding:10px 14px}.cp-cancel{background:#f1f0f5;border:0;color:#333}.cp-modal .cp-primary{color:white}.cp-modal-x{position:absolute;right:17px;top:15px;border:0;background:#f0eff4;color:#555;border-radius:50%;width:29px;height:29px;font-size:18px}
@media(max-width:900px){.cp-work{grid-template-columns:50px minmax(0,1fr) 210px}.cp-brand{min-width:auto}.cp-doc{display:none}.cp-top{gap:12px}.cp-actions{margin-left:auto}.cp-options{gap:10px}.cp-options label{gap:4px}.cp-options input[type=range]{width:55px}}
@media(max-width:650px){.canvasplex-app{height:88vh;min-height:540px;border-radius:8px}.cp-top{height:51px;padding:0 9px}.cp-brand b{display:none}.cp-brand{min-width:35px}.cp-actions{gap:4px}.cp-actions button{padding:7px}.cp-actions .cp-save{font-size:9px}.cp-actions .cp-export{font-size:10px}.cp-menubar{height:34px;padding:0 7px}.cp-menubar button{font-size:10px;padding:5px 7px}.cp-menubar>span{display:none}.cp-mobile-menu{display:block!important;margin-left:auto}.cp-work{grid-template-columns:42px minmax(0,1fr)}.cp-side{display:none;position:absolute;z-index:10;right:0;top:85px;bottom:0;width:min(280px,85vw);box-shadow:-14px 0 35px #0008}.cp-side.open{display:flex}.cp-tools{padding-inline:2px}.cp-tools>button{width:36px;height:38px}.cp-stage{padding:8px}.cp-stage-head{height:34px}.cp-options{height:45px;padding:0 8px;gap:9px}.cp-tool-label{display:none}.cp-options label{font-size:9px}.cp-options input[type=range]{width:50px}.cp-empty{padding:22px 14px}.cp-empty h2{font-size:16px}.cp-empty p{font-size:11px}}


/* Workspace expansion, layer ordering, and richer layer properties */
.canvasplex-app:fullscreen{width:100vw;height:100dvh;max-width:none;min-height:0;border-radius:0}.canvasplex-app.cp-minimized{position:fixed;z-index:99999;right:16px;bottom:16px;width:min(460px,calc(100vw - 32px));height:auto;min-height:0;max-width:none;border-radius:12px;box-shadow:0 18px 60px #0008}.cp-minimized .cp-menubar,.cp-minimized .cp-work,.cp-minimized .cp-dialog-host{display:none}.cp-minimized .cp-top{height:54px;padding:0 12px;gap:10px}.cp-minimized .cp-brand{min-width:auto}.cp-minimized .cp-brand b{font-size:13px}.cp-minimized .cp-doc{display:flex}.cp-minimized .cp-docname{font-size:11px}.cp-minimized .cp-actions{margin-left:auto}.cp-minimized .cp-actions>:not(.cp-minimize-button){display:none}.cp-drag-handle{color:#8c8d9c;font-size:11px;letter-spacing:-3px;padding:4px 3px;cursor:grab;user-select:none}.cp-layer.dragging{opacity:.4}.cp-layer.drop-target{border-top:2px solid #a98aff}.cp-props label{justify-content:space-between;align-items:center;gap:7px}.cp-props label select{width:100%;background:#2a2d38;color:#f4f2fb;border:1px solid #454754;border-radius:6px;padding:7px;font-size:10px}.cp-props input[type=range]{width:100%;accent-color:var(--cp-violet)}.cp-props-actions{display:flex;gap:7px;margin-top:18px}.cp-props-actions button{flex:1;background:#2a2d38;border:1px solid #444653;color:#d5d1e0;border-radius:6px;padding:8px;font-size:10px}.cp-props-actions button:hover{border-color:#9674ee;color:#fff}.cp-side-tabs{flex:0 0 42px}.cp-layers{min-height:60px;flex:1}.cp-layer{flex:0 0 48px}.cp-tools{overflow-y:auto;scrollbar-width:thin}
@media(max-width:650px){.cp-minimized{right:8px!important;bottom:8px!important;width:calc(100vw - 16px)!important}.cp-props{overflow:auto}.cp-side{max-height:calc(100% - 20px)}}
.cp-selection-preview{position:absolute;z-index:4;border:1px dashed #fff;box-shadow:0 0 0 1px #222;pointer-events:none}.cp-selection-preview[hidden]{display:none}

/* In-editor menus, dialogs, selection tools and contextual controls. */
.canvasplex-app{position:relative}.cp-stage{background:#f4f3ef;background-image:none}.cp-modal-bg{position:absolute;inset:0;padding:20px;overflow:auto}.cp-modal{max-height:100%;overflow:auto}.cp-modal input{max-width:210px;border:1px solid #d8d5e2;border-radius:6px;padding:7px;color:#242333;background:#fff}.cp-modal button{color:#242333}.cp-modal button.cp-primary{color:white}.cp-form-error{color:#b63042!important}.cp-options{flex:0 0 54px;order:0;overflow-x:auto;height:54px}.cp-options>label:last-child{display:flex}.cp-options button{background:#353142;color:#e4def2;border:1px solid #50475e;border-radius:5px;padding:5px 8px;font-size:10px;white-space:nowrap}.cp-options select{background:#30313d;color:#eee;border:1px solid #55515f;border-radius:5px;padding:4px;font-size:10px}.cp-gradient-options{display:none;gap:12px;align-items:center}.cp-gradient-options input[type=color]{width:32px;height:25px;border:0;padding:0;background:transparent}.cp-shape-options{display:none!important}[data-active-tool=gradient] .cp-gradient-options{display:flex}[data-active-tool=shape] .cp-shape-options{display:flex!important}.cp-menubar{overflow:visible;z-index:30}.cp-menu{position:relative;font-size:11px}.cp-menu summary{cursor:pointer;list-style:none;padding:6px 10px;color:#d8d5e3}.cp-menu summary::-webkit-details-marker{display:none}.cp-menu[open] summary{background:#3c354d}.cp-menu>div{position:absolute;top:100%;left:0;min-width:210px;background:#292b35;border:1px solid #4b4758;border-radius:6px;box-shadow:0 12px 28px #0007;padding:5px}.cp-menu>div button{display:block;width:100%;text-align:left;padding:9px 10px;color:#eee}.cp-extra-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0}.cp-extra-actions button{background:#30313d;border:1px solid #4e495b;border-radius:5px;padding:7px;font-size:10px;color:#ded8ec}.cp-props{overflow-y:auto;min-height:0}.cp-props small{font-size:10px;color:#aaa;line-height:1.5;display:block}.cp-lasso-overlay{position:absolute;z-index:5;pointer-events:none;overflow:visible}.cp-side{overflow:hidden}.cp-minimized .cp-options{display:none}.cp-canvas{background:transparent}.cp-work{min-height:0}