*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}.editor{height:100vh;display:grid;grid-template-rows:46px 1fr 30px;overflow:hidden}.topbar{background:#292f36;border-bottom:1px solid #14181c;display:flex;align-items:center;padding:0 13px;gap:25px}.brand{display:flex;align-items:center;gap:8px;color:#f2f5f2}.brand b{color:#69d09a;font-size:19px}.brand strong{font-size:14px}.brand i{font-style:normal;color:#89938e;font-weight:400}.topbar nav{display:flex;gap:2px}.topbar nav button,.top-actions button{padding:7px 10px;color:#9da7a2;font-size:11px;border-radius:4px}.topbar nav button:hover,.top-actions button:hover{background:#394149;color:#fff}.top-actions{margin-left:auto;display:flex;gap:5px;align-items:center;color:#86918b;font-size:11px}.top-actions button{font-size:20px;line-height:16px}.main{min-height:0;display:grid;grid-template-columns:54px 1fr 280px}.tools{background:#272d33;border-right:1px solid #151a1d;display:flex;flex-direction:column;align-items:center;padding:8px 4px;gap:2px}.tools button{width:44px;height:44px;border-radius:6px;color:#9aa49f;font-size:20px;display:grid;place-items:center;line-height:14px}.tools button small{font-size:8px;display:block}.tools button.active,.tools button:hover{background:#3a4647;color:#72d2a0}.tool-spacer{flex:1}.canvas-area{min-width:0;display:grid;grid-template-rows:38px 1fr 25px;background:#181d22}.canvas-toolbar{background:#252b31;border-bottom:1px solid #11161a;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.crumb{font-size:10px;color:#a6b0aa;letter-spacing:.12em}.crumb span{margin-left:12px;color:#6f7b75;letter-spacing:0}.canvas-actions{display:flex;gap:5px}.canvas-actions button{font-size:11px;padding:5px 8px;color:#96a19b;border-radius:4px}.canvas-actions button:hover{background:#3a4248;color:#fff}.canvas-actions button:last-child{background:#2f9e6e;color:#fff}.viewport{position:relative;overflow:auto;display:grid;place-items:center;background:#1d2328}.checker{background-color:#252b30;background-image:linear-gradient(45deg,#30373c 25%,transparent 25%),linear-gradient(-45deg,#30373c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#30373c 75%),linear-gradient(-45deg,transparent 75%,#30373c 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.viewport canvas{max-width:88%;max-height:85%;box-shadow:0 8px 30px #0007;transition:transform .15s}.empty{text-align:center;color:#87928c}.empty>div{font-size:35px;color:#58c78e}.empty h2{font-size:16px;color:#c5cec9;margin:10px 0 6px}.empty p{color:#7e8983;margin:0 0 16px}.empty button{background:#319d6b;color:#fff;border-radius:5px;padding:8px 14px;font-size:11px}.hidden{display:none}.statusbar{display:flex;justify-content:space-between;align-items:center;padding:0 10px;color:#7f8b85;background:#242a30;font-size:10px}.right{background:#272d33;border-left:1px solid #151a1d;overflow:auto}.panel{border-bottom:1px solid #151a1d}.panel-title{padding:12px 12px 9px;color:#c8d0cb;font-size:11px;font-weight:700;letter-spacing:.05em}.panel-title button{float:right;color:#94a099}.panel-title span{float:right;color:#65cc93;font-weight:400}.layer-row{display:flex;align-items:center;gap:8px;height:29px;padding:0 10px;color:#aab4ae}.layer-row strong{font-size:11px;font-weight:500;flex:1}.layer-row b{color:#6dce98;font-size:13px}.layer-row button{color:#7d8983;font-size:11px}.layer-row.group{background:#2c333a}.layer-row.child{padding-left:29px;height:27px;cursor:pointer}.layer-row.child:hover,.layer-row.child.selected{background:#34453f;color:#9de6bd}.muted,.prop-empty{padding:12px;color:#738079;font-size:10px}.properties{min-height:150px}.properties label{display:block;padding:6px 12px;color:#909c95;font-size:10px}.properties input{float:right;background:#1c2227;border:1px solid #48524d;border-radius:3px;padding:3px 5px;max-width:110px}.properties input[type=color]{padding:0;width:24px;height:20px}.properties output{float:right;color:#c2ccc5}.prop-actions{padding:10px 12px;display:flex;gap:5px}.prop-actions button{border:1px solid #47534d;border-radius:4px;padding:6px 9px;color:#aeb8b2;font-size:10px}.quick button{display:block;width:calc(100% - 24px);margin:4px 12px;padding:8px 9px;text-align:left;color:#abb5af;border-radius:4px;background:#30373d;font-size:11px}.quick button:hover{background:#3a4942;color:#9ce4bc}.quick button span{float:right;color:#69ce97}.bottom{display:flex;align-items:center;gap:15px;padding:0 12px;background:#252b31;border-top:1px solid #11161a;color:#75817a;font-size:10px}.bottom span:nth-child(2){margin-left:auto}.bottom button{background:#319d6b;color:#fff;border-radius:4px;padding:4px 8px;font-size:10px}.bottom button:disabled{opacity:.35}@media(max-width:900px){.main{grid-template-columns:50px 1fr 240px}.topbar nav{display:none}}@media(max-width:650px){.main{grid-template-columns:45px 1fr}.right,.top-actions span:first-child,.bottom span{display:none}}:root{font:12px Inter,system-ui,sans-serif;color:#d5ddd8;background:#1f242a}.layer-row input[type=color],.background-note input[type=color]{width:22px;height:18px;padding:0;border:0;background:none}.background-note{padding:8px 12px;color:#929e97;font-size:10px}.background-note input{float:right}.user-layer{cursor:pointer;border-left:2px solid transparent}.user-layer.selected{background:#34453f;border-left-color:#69d09a}.user-layer.layer-hidden{opacity:.42}.menu-pop{position:fixed;z-index:20;min-width:145px;padding:5px;background:#30373d;border:1px solid #4b5650;border-radius:5px;box-shadow:0 10px 28px #0008}.menu-pop button{display:block;width:100%;padding:7px 10px;text-align:left;border-radius:3px;color:#c3ccc6;font-size:11px}.menu-pop button:hover{background:#3b4d44;color:#9ee5bc}.editor{background:#f4f6f5;color:#2b353d}.topbar,.tools,.right{background:#eef1ef;border-color:#d6ddda}.topbar{box-shadow:0 1px 4px #26352b12}.topbar nav button,.top-actions button{color:#5d6963}.topbar nav button:hover,.top-actions button:hover{background:#dce8e1;color:#217d57}.tools button{color:#68756e}.tools button.active,.tools button:hover{background:#d5eee0;color:#238b5d}.canvas-area{background:#dfe5e2}.canvas-toolbar,.statusbar,.bottom{background:#e7ebe9;border-color:#ccd5d0;color:#65736b}.crumb{color:#5c6962}.viewport{background:#dfe5e2}.checker{background-color:#e6eae8;background-image:linear-gradient(45deg,#d7ddda 25%,transparent 25%),linear-gradient(-45deg,#d7ddda 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7ddda 75%),linear-gradient(-45deg,transparent 75%,#d7ddda 75%)}.right{color:#3d4943}.layer-row{color:#4e5c55}.layer-row.group{background:#e2e8e4}.layer-row.child:hover,.layer-row.child.selected,.user-layer.selected{background:#d6eee0;color:#217c55}.panel{border-color:#d6ddda}.panel-title{color:#3a4841}.properties label,.muted,.prop-empty{color:#68756e}.properties input{background:#fff;border-color:#cbd5ce;color:#303d36}.quick button{background:#e3e9e5;color:#536159}.quick button:hover{background:#d4eee0;color:#217c55}.brand strong{color:#27332d}.brand i{color:#7c8982}.empty{color:#718078}.empty h2{color:#3e4d45}.menu-pop{background:#fff;border-color:#cbd6cf;box-shadow:0 10px 25px #30403724}.menu-pop button{color:#3d4a43}.menu-pop button:hover{background:#e1f1e7;color:#217d57}.background-note{color:#68756e}.dock-tabs{display:flex;border-bottom:1px solid #d5ddd8}.dock-tab{flex:1;padding:8px;color:#728078;font-size:10px}.dock-tab.active{color:#238b5d;border-bottom:2px solid #48b67b}.navigator-thumb{margin:12px;height:82px;border:1px solid #b8c7bd;background:#fff center/contain no-repeat}.nav-zoom{text-align:center;color:#718079;font-size:10px;padding-bottom:8px}.history-dock{max-height:145px;overflow:auto}.history-item{padding:7px 12px;color:#5b6961;font-size:10px;border-bottom:1px solid #e0e6e2}.color-tool{padding:5px 12px}.color-tool label{display:block;padding:7px 0!important}.color-tool input[type=color]{width:30px;height:22px}.color-tool input[type=range]{width:100%;accent-color:#46ae76}.color-tool p{font-size:10px;color:#718078;line-height:1.5}.swatches{display:flex;gap:6px;margin:6px 0 4px}.swatches button{width:20px;height:20px;border-radius:50%;border:1px solid #c3ccc6}.swatches button:nth-child(1){background:#161a24}.swatches button:nth-child(2){background:#fff}.swatches button:nth-child(3){background:#e35d6a}.swatches button:nth-child(4){background:#f3c95f}.swatches button:nth-child(5){background:#5bbf8b}.swatches button:nth-child(6){background:#6aa9df}.compare-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#25302a55;display:grid;place-items:center}.compare-window{width:min(860px,90vw);background:#fff;border:1px solid #c9d6cd;border-radius:10px;box-shadow:0 18px 45px #26372c35;padding:18px;color:#304039}.compare-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e7e2;padding-bottom:12px}.compare-head span{font-size:11px;color:#809087}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.compare-grid>div{background:#eef2ef;border:1px solid #d8e0db;padding:8px}.compare-grid small{display:block;color:#6f7e75;font-size:9px;margin-bottom:7px}.compare-grid img{display:block;width:100%;height:300px;object-fit:contain;background:#fff}.compare-actions{display:flex;justify-content:flex-end;gap:8px}.compare-actions button{padding:8px 16px;border-radius:5px;background:#e7ece8;color:#526159}.compare-actions .compare-apply{background:#2f9e6e;color:#fff}.settings-window{max-width:900px}.vector-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #e0e7e2}.vector-options label{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #d5dfd8;border-radius:5px;color:#415047;font-size:11px}.vector-options label:has(input:checked){background:#e1f3e8;border-color:#62bd8c;color:#217c54}.vector-options small{display:block;color:#85928a;font-size:9px}.vector-options input{accent-color:#2f9e6e}.compare-grid canvas{display:block;width:100%;height:300px;object-fit:contain;background:#fff}:root{font:12px Inter,system-ui,sans-serif;color:#29323a;background:#f3f5f4}.vector-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;transform-origin:top left}.editable-vector-path{fill:none;stroke:#2474d8;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.88;pointer-events:none}.layer-row.selected,.vector-layer.selected,.vector-copy.selected{background:#d6eee0;color:#217c55;border-left:2px solid #46ae76}.paint-expand-control{display:block!important;margin-top:12px;padding:9px 0!important;border-top:1px solid #dce5df}.paint-expand-control output{float:right;color:#238b5d;font-weight:600}.paint-expand-control input[type=range]{display:block;width:100%;margin-top:8px;accent-color:#46ae76}.property-hint{display:block;margin-top:2px;color:#7a8980;font-size:10px;line-height:1.45}.layer-row strong[title]{cursor:text}.layer-rename{opacity:.65}.layer-row:hover .layer-rename{opacity:1;color:#238b5d}.layer-name-input{min-width:0;flex:1;height:23px;padding:2px 5px;border:1px solid #46ae76;border-radius:3px;background:#fff;color:#26362d;font-size:11px;outline:none;box-shadow:0 0 0 2px #46ae7622}.save-window{width:min(520px,90vw)}.save-window>label{display:block;margin:16px 0;color:#526159;font-size:11px}.save-window>label>input{display:block;width:100%;margin-top:7px;padding:9px 10px;border:1px solid #cbd6cf;border-radius:5px;background:#fff;color:#26362d;outline:none}.save-window>label>input:focus{border-color:#46ae76;box-shadow:0 0 0 2px #46ae7622}.save-location{margin-top:7px;padding:10px;border:1px solid #d7e0da;border-radius:5px;background:#f3f7f4;color:#68776e}.layers{position:relative;padding-bottom:35px}.layer-eye{order:-2;flex:0 0 19px;width:19px;height:24px;padding:0;border-radius:3px;color:#4d5d55!important;text-align:center}.layer-eye.is-visible{background:#d4ded8;box-shadow:inset 0 0 0 1px #b8c6bd}.layer-eye.is-visible:first-letter{font-size:12px}.layer-eye.is-hidden{background:transparent;box-shadow:inset 0 0 0 1px #d7dfda}.layer-eye:hover{background:#cfe9d9!important;box-shadow:inset 0 0 0 1px #75bd94}.layer-row.selected{background:#ccebd9!important;color:#176b49!important;border-left:3px solid #2fa36d!important}.layer-bottom-actions{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:4px 8px;border-top:1px solid #ccd7d0;background:#e8edea}.layer-bottom-actions button{width:29px;height:25px;border-radius:4px;color:#59675f;font-size:15px}.layer-bottom-actions button:hover{background:#d1eadd;color:#1f8057}.layer-folder{border-bottom:1px solid #d9e1dc}.layer-folder-row{background:#dce4df!important}.layer-folder-row b{color:#5c6d63}.layer-folder-children{padding-left:13px;border-left:1px solid #c8d5cd}.layer-folder-children .layer-row{padding-left:6px}.canvas-area{grid-template-rows:31px 38px 1fr 25px}.document-tabs{display:flex;align-items:end;gap:2px;min-width:0;overflow-x:auto;padding:4px 7px 0;background:#d9dfdc;border-bottom:1px solid #c5cec9}.document-tabs-empty{padding:0 8px 7px;color:#89958e;font-size:10px}.document-tab{display:flex;align-items:center;gap:9px;max-width:230px;height:27px;padding:0 8px 0 11px;border-radius:5px 5px 0 0;background:#cbd3cf;color:#59665f;white-space:nowrap}.document-tab span{overflow:hidden;text-overflow:ellipsis}.document-tab i{display:grid;place-items:center;width:17px;height:17px;border-radius:3px;font-style:normal;font-size:15px}.document-tab i:hover{background:#b6c4bc;color:#244f39}.document-tab.active{background:#f4f6f5;color:#26362e;box-shadow:inset 0 2px #2fa36d}.document-tab.active i:hover{background:#d9e7df}.svg-import-stage{position:fixed;left:-100000px;top:-100000px;width:1px;height:1px;overflow:hidden;pointer-events:none;visibility:hidden}.vector-context-bar{position:absolute;z-index:8;left:50%;bottom:14px;transform:translate(-50%);display:flex;align-items:center;gap:5px;max-width:calc(100% - 24px);padding:6px 8px;border:1px solid #c4d0c9;border-radius:8px;background:#fff;box-shadow:0 8px 24px #26372c30;color:#435149;white-space:nowrap}.vector-context-bar.hidden{display:none}.vector-context-bar button{height:32px;padding:0 11px;border-radius:6px;color:#46554d;font-size:11px}.vector-context-bar button:hover,.vector-context-bar button.active{background:#dff1e7;color:#14734b}.vector-context-bar button.primary{background:#1687ee;color:#fff}.vector-context-bar button.primary.active{background:#086fd0;color:#fff}.vector-context-bar label{display:flex;align-items:center;gap:6px;padding-left:6px;color:#69776f;font-size:10px}.vector-context-bar input{width:80px;accent-color:#1687ee}.vector-context-bar output{min-width:32px;color:#1687ee}.viewport:has(.vector-context-bar:not(.hidden)) canvas{margin-bottom:48px}.vector-eraser-cursor{position:absolute;z-index:9;transform:translate(-50%,-50%);border:1.5px solid #087cf0;border-radius:50%;background:#fff5;box-shadow:0 0 0 1px #fff8;pointer-events:none}.vector-eraser-cursor.hidden{display:none}