*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1e1e1e;--panel: #252525;--panel2: #2d2d2d;--border: #3a3a3a;--text: #d4d4d4;--muted: #777;--accent: #3794ff;--hover: #2d2d2d;--selected: #094771;--danger: #c9423a}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;user-select:none}#menu-bar{height:28px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 8px;gap:2px;flex-shrink:0}#menu-bar h1{font-size:13px;font-weight:600;margin-right:12px;color:var(--accent)}.menu-item{padding:3px 10px;cursor:pointer;font-size:12px;color:var(--text);border-radius:3px;position:relative;user-select:none}.menu-item:hover,.menu-item.open{background:#3a3a3a}.menu-spacer{flex:1}.menu-dropdown{display:none;position:absolute;top:calc(100% + 2px);left:0;background:#2a2a2a;border:1px solid var(--border);border-radius:4px;min-width:210px;box-shadow:0 6px 20px #0009;z-index:2000;padding:3px 0}.menu-item.open>.menu-dropdown{display:block}.dropdown-item{padding:5px 32px 5px 16px;font-size:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text);white-space:nowrap}.dropdown-item:hover{background:var(--selected)}.dropdown-item.disabled{opacity:.38;pointer-events:none}.dropdown-sep{height:1px;background:var(--border);margin:3px 0}.dropdown-kbd{font-size:10px;color:var(--muted);margin-left:24px}#tool-options-bar{height:32px;background:var(--panel2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:8px;flex-shrink:0}#tool-options-bar .tool-opt-label{font-size:11px;color:var(--muted);margin-right:2px}#tool-options-bar select,#tool-options-bar input[type=checkbox]{font-size:11px}#tool-options-bar select{background:#1a1a1a;color:var(--text);border:1px solid var(--border);border-radius:2px;padding:2px 4px;cursor:pointer}#current-tool-name{font-size:11px;font-weight:600;color:var(--text);margin-right:8px}.sep{width:1px;height:20px;background:var(--border)}#tf-bar{height:32px;background:var(--panel2);border-bottom:1px solid var(--border);display:none;align-items:center;padding:0 8px;gap:0;flex-shrink:0;font-size:11px}.tf-field{display:flex;align-items:center;gap:3px;padding:0 5px}.tf-field label{font-size:10px;color:var(--muted);user-select:none}.tf-field input[type=number]{width:60px;height:22px;background:#111;color:var(--text);border:1px solid var(--border);border-radius:2px;font-size:11px;padding:0 4px;text-align:right;-moz-appearance:textfield;appearance:textfield}.tf-field input[type=number]::-webkit-inner-spin-button,.tf-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tf-field input[type=number]:focus{border-color:#4a9eff;outline:none}.tf-unit{font-size:10px;color:var(--muted)}#tf-link-btn{padding:0 4px;height:22px;background:none;border:1px solid var(--border);border-radius:2px;cursor:pointer;color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}#tf-link-btn.linked{color:#4a9eff;border-color:#4a9eff}#tf-bar .tf-commit-btns{margin-left:auto;display:flex;gap:4px}#tf-bar .tf-commit-btns button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;font-size:14px;border-radius:3px}#tf-cancel-btn{color:#e06060}#tf-commit-btn{color:#60c060}#tf-cancel-btn:hover{background:#3a1515}#tf-commit-btn:hover{background:#153a15}#tf-anchor{display:grid;grid-template-columns:repeat(3,10px);grid-template-rows:repeat(3,10px);gap:2px;margin:0 4px;cursor:pointer}.ta-pt{width:10px;height:10px;padding:0;margin:0;border:1px solid var(--muted);border-radius:1px;background:none;cursor:pointer;transition:background .1s,border-color .1s}.ta-pt:hover{border-color:#4a9eff;background:#4a9eff40}.ta-pt.active{background:#4a9eff;border-color:#4a9eff}button{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:3px 10px;cursor:pointer;font-size:12px;white-space:nowrap}button:hover{background:#3a3a3a}button:active{background:#444}button:disabled{opacity:.4;cursor:default}button.primary{background:#0d5fab;border-color:#1a6fcf}button.primary:hover{background:#1367c1}button.danger{color:#f47474;border-color:#7a2a2a}button.danger:hover{background:#3d1a1a}#main{display:flex;flex:1;overflow:hidden}#toolbox{width:40px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:4px 0;gap:2px;flex-shrink:0;overflow-y:auto}.tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;font-size:16px;color:var(--text);border:1px solid transparent;background:transparent;padding:0;position:relative}.tool-btn:hover{background:#3a3a3a}.tool-btn.active{background:var(--selected);border-color:var(--accent)}.tool-btn svg{width:18px;height:18px}.tool-btn title{display:none}.tool-sep{width:24px;height:1px;background:var(--border);margin:2px 0}.tool-shortcut{position:absolute;bottom:1px;right:2px;font-size:7px;color:var(--muted);pointer-events:none}#layers-panel{width:260px;min-width:200px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}#layers-toolbar{display:flex;align-items:center;padding:4px 6px;border-bottom:1px solid var(--border);gap:4px}#layers-toolbar span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);flex:1}#layers-toolbar button{padding:2px 7px;font-size:11px}#layers-list{flex:1;overflow-y:auto;overflow-x:hidden}.layer-item{display:flex;align-items:center;padding:4px 6px;cursor:pointer;border-bottom:1px solid #2a2a2a;gap:5px;position:relative}.layer-item:hover{background:var(--hover)}.layer-item.active{background:var(--selected)}.layer-item.drag-over{border-top:2px solid var(--accent)}.layer-vis{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer;opacity:.8;font-size:12px}.layer-vis:hover{background:#3a3a3a;opacity:1}.layer-item.hidden .layer-vis{opacity:.3}.clip-arrow{width:14px;flex-shrink:0;position:relative;align-self:stretch}.clip-arrow.clipped:before{content:"";position:absolute;left:6px;top:2px;width:6px;height:calc(50% + 1px);border-left:1.5px solid #888;border-bottom:1.5px solid #888}.layer-thumb{width:30px;height:30px;flex-shrink:0;background:repeating-conic-gradient(#3a3a3a 0% 25%,#2a2a2a 0% 50%) 0 0/8px 8px;border:1px solid #444;border-radius:2px;overflow:hidden;position:relative}.layer-thumb canvas{width:100%;height:100%;display:block}.layer-item.hidden .layer-thumb{opacity:.4}.so-badge{position:absolute;bottom:1px;right:1px;width:11px;height:11px;background:#1a1a1a;border:1px solid #3794ff;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:7px;color:#3794ff;line-height:1;z-index:2;pointer-events:none}.shape-swatch{position:absolute;top:1px;right:1px;width:12px;height:12px;border:1px solid rgba(255,255,255,.5);border-radius:2px;z-index:2;pointer-events:none;box-shadow:0 0 0 1px #0006}.layer-meta{flex:1;min-width:0}.layer-name-wrap{display:flex;align-items:center;gap:4px}.layer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;flex:1;min-width:0}.layer-name-input{background:#1a1a1a;border:1px solid var(--accent);color:var(--text);padding:1px 4px;font-size:12px;border-radius:2px;width:100%;outline:none}.layer-info{font-size:10px;color:var(--muted);margin-top:1px}.layer-item.hidden .layer-name{opacity:.45}.group-open .layer-name:before{content:"\25bc  ";font-size:9px;color:var(--accent)}.group-close .layer-name:before{content:"\25b6  ";font-size:9px;color:var(--accent)}.drag-handle{width:10px;height:18px;flex-shrink:0;cursor:grab;display:flex;align-items:center;justify-content:center;color:#444;font-size:10px}.drag-handle:hover{color:#888}#props-panel{border-top:1px solid var(--border);padding:8px 8px 6px;flex-shrink:0;background:var(--panel2)}#props-panel.empty{padding:6px 8px}#props-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px}.prop-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}.prop-label{width:58px;flex-shrink:0;color:var(--muted);font-size:11px}.prop-row select,.prop-row input[type=range]{flex:1}.prop-row input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:#444;border-radius:2px;outline:none;cursor:pointer}.prop-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer}.prop-row select{background:#1a1a1a;color:var(--text);border:1px solid var(--border);border-radius:2px;padding:2px 4px;font-size:11px;cursor:pointer}.opacity-val{width:30px;text-align:right;color:var(--muted);font-size:11px}.prop-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.prop-actions button{flex:1;font-size:11px;padding:3px 6px}#canvas-area-wrap{flex:1;position:relative;overflow:hidden;min-width:0}#canvas-area{width:100%;height:100%;overflow:auto;background:#141414;display:flex;align-items:flex-start;justify-content:flex-start;position:relative}#move-overlay{position:absolute;inset:0;z-index:2;cursor:move;display:none}#move-overlay.active{display:block}.layer-bounds-outline{position:absolute;border:1px dashed var(--accent);pointer-events:none;z-index:3}#transform-box{display:none;position:absolute;border:1px solid rgba(55,148,255,.85);box-sizing:border-box;pointer-events:none;z-index:4}#transform-box.active{display:block}.tf-handle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #3794ff;border-radius:1px;box-sizing:border-box;transform:translate(-50%,-50%);pointer-events:all;z-index:5}.tf-handle[data-h=tl]{left:0%;top:0%;cursor:nwse-resize}.tf-handle[data-h=tc]{left:50%;top:0%;cursor:n-resize}.tf-handle[data-h=tr]{left:100%;top:0%;cursor:nesw-resize}.tf-handle[data-h=ml]{left:0%;top:50%;cursor:w-resize}.tf-handle[data-h=mr]{left:100%;top:50%;cursor:e-resize}.tf-handle[data-h=bl]{left:0%;top:100%;cursor:nesw-resize}.tf-handle[data-h=bc]{left:50%;top:100%;cursor:s-resize}.tf-handle[data-h=br]{left:100%;top:100%;cursor:nwse-resize}#tf-angle-label{display:none;position:absolute;background:#000000bf;color:#fff;font-size:11px;padding:2px 6px;border-radius:3px;pointer-events:none;z-index:10;white-space:nowrap}#tf-angle-label.on{display:block}#crop-overlay{position:absolute;z-index:8;display:none;cursor:crosshair;inset:-200%;overflow:visible}#crop-overlay.active{display:block}.crop-shade{position:absolute;background:#0000008c;pointer-events:none}#crop-box{position:absolute;border:1px dashed rgba(255,255,255,.7);box-sizing:border-box;pointer-events:none}#crop-box.has-region{pointer-events:auto;cursor:move}.crop-grid-line{position:absolute;background:#ffffff40;pointer-events:none}.crop-grid-line.h{left:0;right:0;height:1px}.crop-grid-line.v{top:0;bottom:0;width:1px}.crop-handle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #555;box-sizing:border-box;transform:translate(-50%,-50%);pointer-events:all;z-index:9;cursor:nwse-resize}.crop-handle[data-h=tl]{left:0%;top:0%;cursor:nwse-resize}.crop-handle[data-h=tc]{left:50%;top:0%;cursor:n-resize}.crop-handle[data-h=tr]{left:100%;top:0%;cursor:nesw-resize}.crop-handle[data-h=ml]{left:0%;top:50%;cursor:w-resize}.crop-handle[data-h=mr]{left:100%;top:50%;cursor:e-resize}.crop-handle[data-h=bl]{left:0%;top:100%;cursor:nesw-resize}.crop-handle[data-h=bc]{left:50%;top:100%;cursor:s-resize}.crop-handle[data-h=br]{left:100%;top:100%;cursor:nwse-resize}#crop-size-label{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;pointer-events:none;white-space:nowrap}#canvas-wrap{margin:20px;box-shadow:0 4px 24px #0009;position:relative;overflow:visible}#canvas-wrap:before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(#2a2a2a 0% 25%,#1f1f1f 0% 50%) 0 0/20px 20px;z-index:0}#main-canvas{display:block;position:relative;z-index:1;image-rendering:pixelated}#tab-bar{background:var(--panel);border-bottom:1px solid var(--border);display:none;flex-shrink:0;overflow-x:auto;height:28px;align-items:stretch}.doc-tab{padding:0 10px 0 12px;cursor:pointer;display:flex;align-items:center;gap:2px;font-size:12px;color:var(--muted);border-right:1px solid var(--border);white-space:nowrap;position:relative}.doc-tab:hover{background:var(--hover);color:var(--text)}.doc-tab.active{background:var(--panel2);color:var(--text);border-bottom:2px solid var(--accent)}.doc-tab-close{margin-left:6px;font-size:14px;line-height:1;opacity:.5;cursor:pointer}.doc-tab-close:hover{opacity:1}#drop-zone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);z-index:10}#drop-zone.hidden{display:none}#drop-zone p{font-size:15px}#drop-zone small{font-size:11px}#drop-zone.dragover{background:#3794ff12}#drop-zone.dragover p{color:var(--accent)}#layer-drop-indicator{display:none;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#3794ff14;border:2px dashed var(--accent);border-radius:4px;color:var(--accent);pointer-events:none;font-size:14px;font-weight:500}#layer-drop-indicator.active{display:flex}#zoom-bar{position:absolute;bottom:10px;right:10px;display:flex;gap:4px;z-index:10;align-items:center;pointer-events:auto}#zoom-bar button{padding:2px 8px;font-size:11px}#zoom-label{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:2px 8px;font-size:11px;min-width:48px;text-align:center}#progress{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:7px 16px;font-size:12px;z-index:100;display:none;box-shadow:0 2px 8px #00000080}#progress.on{display:block}#ctx-menu{position:fixed;background:#2a2a2a;border:1px solid #555;border-radius:4px;padding:4px 0;z-index:200;box-shadow:0 4px 12px #00000080;display:none;min-width:160px}#ctx-menu.on{display:block}.ctx-item{padding:5px 14px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:8px}.ctx-item:hover{background:#3a3a3a}.ctx-item.danger{color:#f47474}.ctx-sep{height:1px;background:#444;margin:3px 0}.overlay,#color-overlay{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;background:#00000080}.overlay.on,#color-overlay.on{display:flex}#new-doc-box{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:280px}#new-doc-box h3{font-size:13px;font-weight:600;margin:0}#new-doc-box .row{display:flex;gap:8px;align-items:center}#new-doc-box input[type=number]{background:#1a1a1a;color:var(--text);border:1px solid var(--border);border-radius:2px;padding:3px 6px;font-size:12px}#color-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:#00000080}#color-overlay.on{display:flex}#cp-dialog{background:#535353;border:1px solid #1a1a1a;border-radius:4px;padding:0;user-select:none;box-shadow:0 8px 32px #0009;display:flex;flex-direction:column}#cp-titlebar{background:#3c3c3c;padding:6px 12px;font-size:12px;font-weight:600;color:#ccc;border-bottom:1px solid #1a1a1a;border-radius:4px 4px 0 0;cursor:move}#cp-body{display:flex;gap:14px;padding:14px}#cp-sv-wrap{position:relative;width:256px;height:256px;cursor:crosshair;border:1px solid #1a1a1a}#cp-sv-canvas{display:block;width:256px;height:256px}#cp-sv-cursor{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000080}#cp-hue-wrap{position:relative;width:20px;height:256px;cursor:pointer;border:1px solid #1a1a1a}#cp-hue-canvas{display:block;width:20px;height:256px}#cp-hue-cursor{position:absolute;left:-3px;width:26px;height:4px;border:1px solid #fff;pointer-events:none;transform:translateY(-50%);box-shadow:0 0 0 1px #00000080}#cp-right{display:flex;flex-direction:column;gap:8px;min-width:200px}#cp-buttons{display:flex;flex-direction:column;gap:4px}#cp-buttons button{width:90px;padding:4px 8px;font-size:11px;cursor:pointer;background:#6a6a6a;color:#eee;border:1px solid #444;border-radius:3px}#cp-buttons button:hover{background:#777}#cp-buttons button.primary{background:#4a90d9;border-color:#3a7cc5}#cp-buttons button.primary:hover{background:#5a9de9}#cp-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}#cp-preview-labels{display:flex;justify-content:space-between;width:60px;font-size:10px;color:#aaa}#cp-preview-box{width:60px;height:60px;border:1px solid #1a1a1a;display:flex;flex-direction:column}#cp-new-color,#cp-cur-color{flex:1;width:100%}#cp-inputs{display:grid;grid-template-columns:18px 14px 42px 8px 18px 42px;gap:3px 2px;font-size:11px;align-items:center;color:#ccc}#cp-inputs input[type=radio]{width:12px;height:12px;margin:0;accent-color:#4a90d9}#cp-inputs input[type=number],#cp-inputs input[type=text]{background:#2a2a2a;color:#eee;border:1px solid #1a1a1a;border-radius:2px;padding:2px 4px;font-size:11px;width:100%;-moz-appearance:textfield}#cp-inputs input[type=number]::-webkit-inner-spin-button,#cp-inputs input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}#cp-inputs .cp-unit{font-size:10px;color:#888}#cp-hex-row{display:flex;align-items:center;gap:4px;font-size:11px;color:#ccc;margin-top:4px}#cp-hex-input{background:#2a2a2a;color:#eee;border:1px solid #1a1a1a;border-radius:2px;padding:2px 4px;font-size:11px;width:70px}#cp-web-row{display:flex;align-items:center;gap:4px;font-size:10px;color:#aaa;margin-top:2px}#warp-overlay{position:absolute;inset:0;z-index:6;pointer-events:none;display:none}#warp-overlay.active{display:block;pointer-events:all;cursor:default}#warp-svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}.warp-grid-line{fill:none;stroke:#3794ffb3;stroke-width:1;pointer-events:none;vector-effect:non-scaling-stroke}.warp-cp{fill:#3794ff;stroke:#fff;stroke-width:1.5;cursor:move;pointer-events:all}.warp-cp.corner{r:5}.warp-cp.tangent{r:3.5;fill:#fff;stroke:#3794ff}.warp-cp:hover{fill:#fff;stroke:#3794ff}.warp-cp.corner:hover{fill:#5ab0ff}.warp-tangent-line{stroke:#3794ff66;stroke-width:1;pointer-events:none;fill:none}#warp-bar{height:32px;background:var(--panel2);border-bottom:1px solid var(--border);display:none;align-items:center;padding:0 8px;gap:0;flex-shrink:0;font-size:11px}#warp-bar .warp-label{font-size:10px;color:var(--muted);padding:0 6px;user-select:none}#warp-bar select{background:#111;color:var(--text);border:1px solid var(--border);border-radius:2px;font-size:11px;padding:2px 4px;height:22px}#warp-bar .warp-commit-btns{margin-left:auto;display:flex;gap:4px}#warp-bar .warp-commit-btns button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;font-size:14px;border-radius:3px}#warp-cancel-btn{color:#e06060}#warp-done-btn{color:#60c060}