:root{--ink:#232536;--muted:#9293a3;--line:#ececf2;--paper:#fff;--lav:#7559e8;--lav-dark:#6346dc;--lav-soft:#f2efff;--surface:#f7f7fb;--mint:#dff5ef;--peach:#ffede4;--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:13px;overflow:hidden}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a99af7;outline-offset:2px}.app-shell{height:100vh;min-width:920px;display:flex;flex-direction:column}.topbar{height:64px;flex:none;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:28px;z-index:3}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:800 18px var(--display);letter-spacing:-.8px;min-width:190px}.brand-mark{width:26px;height:26px;display:flex;align-items:end;gap:2px;padding:5px;border-radius:8px;background:linear-gradient(135deg,#8d74f3,#5e48d8);transform:rotate(-7deg)}.brand-mark i{width:4px;border-radius:4px;background:white;display:block}.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:10px}.file-meta{display:flex;align-items:center;gap:8px;color:#a1a1ae;font-size:11px}.file-meta input{border:0;width:155px;color:#55566a;font-weight:600;outline:none;padding:6px;border-radius:5px;background:transparent}.file-meta input:focus{background:#f6f5fa}.saved-dot{width:6px;height:6px;border-radius:50%;background:#4bbd8a}.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.icon-button{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#76778a;font-size:18px;display:inline-grid;place-items:center;transition:.16s}.icon-button:hover{background:#f3f2f8;color:var(--ink)}.top-divider,.toolbar-sep{height:24px;width:1px;background:var(--line);margin:0 5px}.share-button,.export-button{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 14px;background:#fff;font-weight:700;color:#545569}.share-button span{font-size:15px;color:#7258e8;margin-right:5px}.export-button{background:var(--lav);color:white;border-color:var(--lav);padding:0 17px;box-shadow:0 3px 8px #7559e829}.export-button:hover{background:var(--lav-dark)}.editor-layout{flex:1;min-height:0;display:grid;grid-template-columns:76px 260px minmax(320px,1fr) 270px}.left-rail{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:13px 8px;gap:5px;z-index:2}.rail-item{width:60px;height:57px;border:0;background:transparent;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#9293a3;font-size:10px;font-weight:600}.rail-item:hover{background:#f7f6fb;color:#44455a}.rail-item.active{background:#f0edff;color:#6851de}.rail-icon{font-size:21px;line-height:21px;font-weight:500}.rail-spacer{flex:1}.tool-panel{background:#fff;border-right:1px solid var(--line);padding:23px 17px;overflow:auto;position:relative;z-index:1}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.eyebrow,.card-kicker{font-size:9px;letter-spacing:1.2px;font-weight:700;color:#a1a0b1}.panel-head h1{font:700 20px var(--display);letter-spacing:-.6px;margin:5px 0 0}.close-panel{font-size:21px}.panel-search{height:39px;border:1px solid #e8e7ef;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 11px;margin-bottom:19px;color:#9b9aaa}.panel-search input{width:100%;border:0;outline:0;color:#4a4b5d;font-size:12px}.panel-label{display:flex;align-items:center;justify-content:space-between;color:#77788b;font-size:11px;font-weight:700;margin:19px 0 10px}.panel-label button{border:0;background:transparent;color:#7862df;font-size:11px;font-weight:600}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.template-card{height:120px;border:1px solid #eeeef3;border-radius:10px;overflow:hidden;cursor:pointer;position:relative;background:#fff;transition:.2s}.template-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #38364d12}.template-card small{position:absolute;bottom:7px;left:8px;background:#ffffffd9;border-radius:4px;padding:3px 5px;font-size:9px;color:#5a5a69}.tpl-art{height:100%;position:relative;overflow:hidden}.tpl-a{background:#f5c0a7}.tpl-a:before{content:'SUNDAY';position:absolute;top:24px;left:14px;font:800 13px var(--display);letter-spacing:2px;color:#704f40}.tpl-a:after{content:'slow\A mornings';white-space:pre;position:absolute;top:47px;left:14px;font:700 17px/1.1 Georgia;color:#fff}.tpl-a i{position:absolute;width:55px;height:55px;border-radius:50%;background:#efa486;right:5px;bottom:10px}.tpl-b{background:#f4d464}.tpl-b:before{content:'a little\A sunshine';white-space:pre;position:absolute;top:24px;left:14px;font:800 17px/1.1 var(--display);color:#295349}.tpl-b:after{content:'✳';position:absolute;font-size:56px;color:#f29b71;right:8px;bottom:1px}.tpl-c{background:#ded9fa}.tpl-c:before{content:'MAKE\A SPACE';white-space:pre;position:absolute;top:24px;left:14px;font:800 18px/1 var(--display);letter-spacing:1px;color:#5d50a5}.tpl-c:after{content:'✦';position:absolute;right:15px;bottom:7px;font-size:45px;color:#8e7adf}.tpl-d{background:#b9ded1}.tpl-d:before{content:'GOOD\A THINGS';white-space:pre;position:absolute;top:22px;left:14px;font:800 17px/1 var(--display);color:#416c5d}.tpl-d:after{content:'◜';position:absolute;right:12px;bottom:-24px;font-size:80px;color:#6ba68c}.template-caption{display:flex;justify-content:space-between;color:#89899a;font-size:10px;margin:7px 1px 0}.divider{height:1px;background:#efeff4;margin:19px 0}.start-empty{border:1px dashed #dad9e4;border-radius:11px;padding:15px;text-align:center;color:#9797a5;font-size:11px;line-height:1.5}.start-empty b{display:block;color:#626375;margin:0 0 3px}.text-presets{display:flex;flex-direction:column;gap:8px}.preset-card{padding:13px 12px;border:1px solid #eeeef3;border-radius:9px;background:#fff;text-align:left}.preset-card:hover{background:#f9f7ff;border-color:#d8cffc}.preset-card strong{display:block;font:700 20px var(--display);letter-spacing:-.7px}.preset-card span{font-size:10px;color:#9293a2}.element-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.element-tile{height:67px;border:1px solid #eeeef2;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:28px;color:#7161c4}.element-tile:hover{background:#f4f1ff;border-color:#dad1ff}.upload-drop{border:1px dashed #c9c3e8;background:#faf9ff;border-radius:12px;padding:20px 12px;text-align:center}.upload-cloud{width:36px;height:36px;border-radius:12px;background:#eeeaff;color:#765ee1;display:grid;place-items:center;margin:0 auto 10px;font-size:19px}.upload-drop b{display:block;font-size:12px;margin-bottom:4px}.upload-drop p{font-size:10px;color:#9695a3;margin:0 0 12px}.primary-small{background:var(--lav);border:0;color:white;border-radius:7px;padding:8px 12px;font-size:10px;font-weight:700}.asset-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.asset-thumb{height:84px;border-radius:8px;overflow:hidden;background:#f0eff5;position:relative}.asset-thumb img{width:100%;height:100%;object-fit:cover}.asset-add{position:absolute;right:5px;top:5px;width:23px;height:23px;border-radius:7px;border:0;background:white;color:#6652d5}.brand-palette{display:flex;gap:8px}.brand-swatch{height:48px;flex:1;border:0;border-radius:9px}.workspace{position:relative;min-width:0;background:#f4f4f8;display:flex;flex-direction:column;overflow:hidden}.canvas-toolbar{height:53px;background:#fff;border-bottom:1px solid #ededf1;display:flex;align-items:center;justify-content:space-between;padding:0 19px;flex:none}.crumb{display:flex;align-items:center;gap:9px;color:#89899a;font-size:11px}.crumb-icon{font-size:18px;color:#8874e4}.crumb-sep{color:#d1d0d9}.crumb span:nth-child(2){color:#46475a;font-weight:600}.canvas-actions{display:flex;align-items:center;gap:5px}.soft-button{height:30px;border:1px solid #eeedf2;border-radius:7px;background:#fff;padding:0 10px;color:#77788a;font-size:10px;font-weight:600}.soft-button:hover{border-color:#cfc7f2;background:#fbfaff}.soft-button span{font-size:13px;color:#7560db;margin-right:5px}.color-dot{display:inline-block;width:12px;height:12px;border-radius:4px;background:#fff;border:1px solid #ceccd8;vertical-align:-2px}.stage-scroll{flex:1;overflow:auto;position:relative}.canvas-space{position:relative;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:54px 40px 62px}.page-shadow{flex:none;position:relative;box-shadow:0 13px 35px #25233b22,0 1px 3px #25233b20;background:white;transition:width .22s,height .22s}.design-page{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:#fff;transform-origin:top left}.design-page.transparent-bg{background-color:transparent;background-image:linear-gradient(45deg,#f1f1f4 25%,transparent 25%),linear-gradient(-45deg,#f1f1f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f1f4 75%),linear-gradient(-45deg,transparent 75%,#f1f1f4 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.object{position:absolute;transform-origin:center;user-select:none;touch-action:none}.object.selected{outline:1px solid #795fea;outline-offset:2px}.object.selected:after{content:'';position:absolute;right:-5px;bottom:-5px;width:8px;height:8px;background:white;border:1px solid #795fea;border-radius:2px}.obj-text{white-space:pre-wrap;overflow-wrap:anywhere;cursor:move;line-height:1.15;padding:2px}.obj-shape{cursor:move;display:flex;align-items:center;justify-content:center}.obj-image{object-fit:contain;cursor:move;user-select:none}.empty-hint{position:absolute;top:calc(50% + 215px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;flex-direction:column;color:#aaa9b5;font-size:10px;white-space:nowrap;pointer-events:none}.empty-hint b{font:600 12px var(--display);color:#77788a}.hint-orbit{font-size:16px;color:#9a8ae8}.bottom-bar{height:48px;border-top:1px solid #eaeaf0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex:none;color:#858596}.bottom-left,.bottom-right,.bottom-center{display:flex;align-items:center;gap:8px}.bottom-button{border:0;background:transparent;color:#8a8a99;font-size:11px;display:flex;align-items:center;gap:6px;padding:5px}.bottom-button:hover{color:#5e4bce}.bottom-center{gap:7px}.zoom-button{width:24px;height:24px;border:1px solid #eeeef2;font-size:14px}.bottom-center input{width:102px;height:3px;accent-color:#725ce0}.zoom-value{width:35px;font-size:10px;color:#727285}.fit-button{border:1px solid #eeeef2;background:white;border-radius:5px;font-size:10px;padding:4px 8px;color:#77788b}.page-count{font-size:10px}.page-count b{color:#55566a}.inspector{background:#fff;border-left:1px solid var(--line);overflow:auto;padding:0 16px 18px;z-index:1}.inspector-top{height:53px;border-bottom:1px solid #f0eff4;display:flex;align-items:center;justify-content:space-between}.inspector-title{font-size:12px;font-weight:700;color:#5b5c6d}.inspector-content{padding-top:16px}.welcome-card{border:1px solid #efedf5;border-radius:12px;padding:12px;background:white}.welcome-art{height:102px;border-radius:8px;background:#f4f0ff;position:relative;overflow:hidden;margin-bottom:14px}.art-sun{position:absolute;width:45px;height:45px;border-radius:50%;background:#ffc87e;top:18px;left:45px}.art-hill{position:absolute;border-radius:55% 55% 0 0;transform:rotate(-8deg)}.hill-one{width:180px;height:75px;left:-21px;bottom:-40px;background:#a69bea}.hill-two{width:175px;height:77px;right:-45px;bottom:-45px;background:#cdc5fa}.art-spark{position:absolute;right:34px;top:19px;color:#8976e4;font-size:21px}.welcome-card h2{font:700 18px/1.2 var(--display);letter-spacing:-.6px;margin:7px 0}.welcome-card p{font-size:10px;line-height:1.5;color:#9292a0;margin:0 0 10px}.text-link{border:0;background:transparent;padding:3px 0;color:#7058dc;font-size:10px;font-weight:700}.text-link span{margin-left:4px}.inspector-section{margin-top:22px}.section-title{font-size:9px;letter-spacing:1px;font-weight:700;color:#a09fac;margin:0 0 9px;display:flex;justify-content:space-between}.section-title button{border:0;background:none;color:#9a99a6}.quick-row{width:100%;border:0;background:white;display:flex;align-items:center;text-align:left;gap:9px;padding:9px 2px;border-bottom:1px solid #f2f1f5}.quick-row:hover{background:#faf9ff}.quick-symbol{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}.lilac{background:#f0edff;color:#735de0}.peach{background:#fff0e8;color:#dd9971}.mint{background:#e6f6ef;color:#56a187}.quick-row b{display:block;font-size:10px;color:#5c5d6e}.quick-row small{display:block;margin-top:3px;font-size:9px;color:#a09fac}.row-arrow{margin-left:auto;font-size:17px;color:#b4b2c0}.tip-card{display:flex;gap:9px;margin-top:18px;padding:11px;background:#faf8ff;border:1px solid #f0edfb;border-radius:9px;color:#917be4}.tip-card p{margin:0;color:#8e8d9c;font-size:9px;line-height:1.5}.tip-card b{color:#69697b;font-size:10px}.inspector-empty{padding:18px 12px;text-align:center;color:#a0a0ad;font-size:10px;line-height:1.5}.inspector-empty .empty-icon{width:42px;height:42px;margin:0 auto 10px;border-radius:13px;background:#f3f0ff;display:grid;place-items:center;color:#7962dc;font-size:18px}.inspector-empty b{display:block;color:#656577;margin-bottom:4px}.prop-group{padding:16px 0;border-bottom:1px solid #f0eff4}.prop-title{font-size:10px;font-weight:700;color:#5e5f70;margin-bottom:10px}.prop-label{font-size:9px;color:#9998a5;margin-bottom:5px;display:block}.prop-input,.prop-select{width:100%;height:33px;border:1px solid #e8e7ee;border-radius:7px;background:white;padding:0 9px;color:#5e5e6c;font-size:11px}.prop-row{display:flex;gap:8px}.prop-row>div{flex:1}.prop-color{height:32px;padding:3px;width:100%;border:1px solid #e8e7ee;border-radius:7px;background:white}.prop-range{width:100%;accent-color:#765fe4}.prop-check{display:flex;align-items:center;gap:7px;font-size:10px;color:#777787;margin:10px 0}.danger-button{border:1px solid #f1e2e2;background:white;color:#b46565;border-radius:7px;padding:8px 10px;font-size:10px;width:100%;margin-top:8px}.modal-backdrop{position:fixed;inset:0;background:#28263c50;z-index:10;display:grid;place-items:center;backdrop-filter:blur(3px)}.modal-backdrop.hidden{display:none}.modal{width:min(440px,calc(100vw - 32px));background:#fff;border-radius:16px;box-shadow:0 22px 70px #29263c35;padding:22px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:17px}.modal-head h2{font:700 19px var(--display);margin:0;letter-spacing:-.5px}.modal-head p{font-size:11px;color:#9292a0;margin:5px 0 0}.modal-close{border:0;background:#f5f4f8;border-radius:8px;width:28px;height:28px;color:#777}.form-label{display:block;font-size:10px;font-weight:700;color:#777789;margin:12px 0 6px}.form-input,.form-select{height:37px;border:1px solid #e8e7ef;border-radius:8px;background:#fff;padding:0 10px;width:100%;font-size:11px;color:#55566a}.modal-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.unit-pills{display:flex;gap:5px;margin-top:12px}.unit-pill{border:1px solid #e9e8ef;background:white;border-radius:6px;padding:6px 9px;font-size:9px;color:#838393}.unit-pill.active{background:#f0edff;color:#6d56da;border-color:#ded6ff}.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:21px}.secondary-button,.modal-primary{height:35px;border-radius:8px;padding:0 13px;font-size:10px;font-weight:700}.secondary-button{border:1px solid #e9e8ef;background:white;color:#6f7080}.modal-primary{border:1px solid var(--lav);background:var(--lav);color:white}.format-list{display:flex;gap:8px;margin:14px 0}.format-choice{flex:1;border:1px solid #e9e8ef;border-radius:9px;background:white;padding:11px 7px;color:#707082;font-size:10px}.format-choice b{display:block;color:#56576a;font-size:11px;margin-bottom:3px}.format-choice.active{border-color:#907cf0;background:#f8f6ff;color:#6b54dd}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#717182;margin:15px 0}.toggle{width:36px;height:20px;border:0;border-radius:20px;background:#d8d7e0;padding:2px;transition:.2s}.toggle i{display:block;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002;transition:.2s}.toggle.on{background:#755be2}.toggle.on i{transform:translateX(16px)}.modal-hint{font-size:10px;color:#9998a6;line-height:1.5}.toast{position:fixed;bottom:64px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#29283a;color:white;padding:10px 15px;border-radius:9px;font-size:11px;box-shadow:0 8px 30px #1c1b2a25;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-help{display:none}@media(max-width:1150px){.editor-layout{grid-template-columns:68px 240px minmax(300px,1fr)}.inspector{display:none}.brand{min-width:155px}.empty-hint{top:calc(50% + 190px)}}
.projects-button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px;color:#666679;font-size:10px;font-weight:700;white-space:nowrap}.projects-button:hover{background:#f8f6ff;border-color:#dcd5f7;color:#6650d5}.obj-image-wrap{overflow:visible}.obj-image-wrap>img{width:100%;height:100%;display:block;pointer-events:none}.object.selected{z-index:2}.resize-handle{position:absolute;width:10px;height:10px;border:1.5px solid #7359e4;background:white;border-radius:50%;padding:0;z-index:3;touch-action:none}.resize-handle.nw{left:-5px;top:-5px;cursor:nwse-resize}.resize-handle.ne{right:-5px;top:-5px;cursor:nesw-resize}.resize-handle.sw{left:-5px;bottom:-5px;cursor:nesw-resize}.resize-handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}.resize-handle.n{left:calc(50% - 5px);top:-5px;cursor:ns-resize}.resize-handle.s{left:calc(50% - 5px);bottom:-5px;cursor:ns-resize}.resize-handle.e{right:-5px;top:calc(50% - 5px);cursor:ew-resize}.resize-handle.w{left:-5px;top:calc(50% - 5px);cursor:ew-resize}.snap-guide{position:absolute;z-index:20;pointer-events:none;background:#8065e9;opacity:.8}.snap-guide.vertical{width:1px;top:0;bottom:0}.snap-guide.horizontal{height:1px;left:0;right:0}.project-list{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow:auto}.project-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #efedf4;border-radius:9px}.project-preview{width:52px;height:37px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 1px #0000000d}.project-info{min-width:0;flex:1}.project-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.project-info small{display:block;color:#9998a6;font-size:9px;margin-top:3px}.project-row button{border:1px solid #e9e8ef;background:white;border-radius:6px;padding:6px 8px;font-size:9px;color:#6e6d7d}.project-row button:hover{border-color:#c9c0f2;background:#faf9ff}.project-empty{padding:17px;border:1px dashed #dddbe6;border-radius:9px;text-align:center;color:#9897a5;font-size:10px;line-height:1.5}.project-empty b{display:block;color:#626275;margin-bottom:4px}.resize-fit-check{margin:14px 0 0!important}.resize-hint{font-size:9px;color:#9998a5;line-height:1.45;margin:7px 0 0}.export-limit{padding:9px 10px;background:#fff7e9;border-radius:7px;color:#977441;font-size:10px;line-height:1.4;margin-top:10px}
.object.selected:after{display:none}
.bg-preview-frame{height:220px;border:1px solid #eceaf2;border-radius:10px;display:grid;place-items:center;overflow:hidden;background-color:#f7f7fa;background-image:linear-gradient(45deg,#e9e9ed 25%,transparent 25%),linear-gradient(-45deg,#e9e9ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9ed 75%),linear-gradient(-45deg,transparent 75%,#e9e9ed 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.bg-preview-frame img{max-width:100%;max-height:100%;object-fit:contain}
.object.selected{z-index:auto}

/* Tablet-friendly editor layout */
@media (max-width: 1100px){
  .app-shell{min-width:0}
  .topbar{gap:14px;padding:0 14px}
  .brand{min-width:auto}
  .editor-layout{grid-template-columns:64px 220px minmax(280px,1fr)}
  .inspector{display:none}
}
@media (max-width: 680px){
  .topbar{height:56px;padding:0 8px;gap:8px}
  .brand{font-size:15px;gap:6px}
  .brand-mark{width:23px;height:23px}
  .projects-button{padding:6px 8px;font-size:10px}
  .file-meta{gap:3px}
  .file-meta input{width:96px;font-size:10px}
  #saveStatus,.saved-dot,.top-divider{display:none}
  .top-actions{gap:2px}
  .export-button{height:32px;padding:0 9px}
  .editor-layout{grid-template-columns:54px 190px minmax(250px,1fr)}
  .left-rail{padding:8px 3px}
  .rail-item{width:48px;height:51px;font-size:9px}
  .tool-panel{padding:16px 11px}
  .canvas-toolbar{padding:0 10px}
  .crumb{font-size:10px;min-width:0;overflow:hidden;white-space:nowrap}
  .canvas-actions{gap:3px}
  .soft-button{padding:0 7px;font-size:10px}
  .bottom-center{gap:3px}
  #zoomRange{width:65px}
  .page-count{display:none}
}
.help-guide p{font-size:12px;line-height:1.55;color:#707183;margin:12px 0}
.help-guide b{color:#303145}