:root{--ink:#1b1d22;--ink-2:#272a31;--line:#393d47;--muted:#aeb4c1;--paper:#fffdf7;--blue:#216cda;--panel:#20232a}*{box-sizing:border-box}body{margin:0;min-width:980px;background:var(--ink);color:#f4f5f7;font:13px/1.35 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}.app-shell{height:100vh;display:grid;grid-template-rows:50px 42px 1fr}.topbar,.controlbar{display:flex;align-items:center;border-bottom:1px solid var(--line);background:#202229}.topbar{padding:0 16px;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.1px}.brand-mark{display:grid;place-items:center;width:23px;height:23px;color:white;background:var(--blue);font-family:Georgia,serif;font-size:16px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}.brand em{color:#878e9d;font-size:10px;font-style:normal;font-weight:500;margin-left:3px}.document-name{color:#d8dbe1;min-width:160px;text-align:center;outline:none;border-bottom:1px solid transparent}.document-name:focus{border-color:#779fe8}.top-actions{display:flex;gap:7px}button{border:1px solid #474c58;border-radius:5px;background:#2b2e36;color:#e9ebef;padding:6px 10px;font:inherit;cursor:pointer}button:hover{background:#373b45}button:focus-visible,input:focus-visible{outline:2px solid #75a4ff;outline-offset:1px}.primary{background:var(--blue);border-color:#367de1;color:#fff}.primary:hover{background:#2b75e0}.controlbar{padding:0 14px;gap:10px;color:var(--muted);font-size:12px}.controlbar label{display:flex;align-items:center;gap:4px}.controlbar input{width:58px}.separator{height:20px;border-left:1px solid var(--line)}input[type=number]{background:#17191e;color:#f5f6f8;border:1px solid #424752;border-radius:3px;padding:4px 5px;font:inherit}main{min-height:0;display:grid;grid-template-columns:82px 1fr 270px}.tools{background:#202229;border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;align-items:stretch;gap:5px}.tool{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-color:transparent;background:transparent;color:#b8becc;font-size:10px}.tool b{font-size:18px;font-weight:500;line-height:18px}.tool:hover,.tool.active{background:#343944;color:#fff;border-color:#4b5361}.tool.active{box-shadow:inset 2px 0 var(--blue)}.tool-divider{height:1px;background:var(--line);margin:5px 6px}.workspace{position:relative;min-width:0;min-height:0;display:grid;grid-template:26px 1fr 24px/26px 1fr;background:#121419}.pasteboard{grid-column:2;min-width:0;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;background-color:#14161b;background-image:radial-gradient(#363a43 1px,transparent 1px);background-size:18px 18px;padding:70px}.canvas-wrap{width:min(1000px,90%);min-width:600px;transform-origin:center;transition:transform .12s ease;filter:drop-shadow(0 18px 20px rgba(0,0,0,.34))}.canvas-wrap svg{display:block;width:100%;height:auto;background:var(--paper);cursor:default}.canvas-wrap.drawing svg{cursor:crosshair}.ruler{background:#202229;color:#7f8796;font-size:9px;display:flex;justify-content:space-between;padding:6px;border-color:var(--line);overflow:hidden;white-space:nowrap}.ruler-x{grid-column:2;border-bottom:1px solid var(--line)}.ruler-y{grid-row:1/3;grid-column:1;flex-direction:column;padding:5px 8px 42px 6px;border-right:1px solid var(--line)}.statusbar{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;padding:0 10px;color:#8c93a1;background:#202229;border-top:1px solid var(--line);font-size:11px}.panels{background:#202229;border-left:1px solid var(--line);overflow-y:auto}.panel{padding:12px;border-bottom:1px solid var(--line)}.panel h2{font-size:12px;margin:0 0 10px;color:#e3e6ec}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-title h2{margin:0}.panel-title button{padding:1px 7px;font-size:16px}.field-row{display:flex;gap:8px;align-items:center;margin-top:7px}.field-row label{display:flex;align-items:center;gap:5px;color:var(--muted);min-width:0}.field-row input[type=color]{width:32px;height:25px;padding:2px;border:1px solid #545b68;background:#16181d}.field-row input[type=number]{width:52px}.field-row input[type=range]{width:76px;accent-color:var(--blue)}output{color:#e5e7eb;font-size:11px}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.swatch{width:100%;aspect-ratio:1;border-radius:3px;border:1px solid rgba(255,255,255,.2);padding:0}.layer-row{display:grid;grid-template-columns:20px 1fr 24px;gap:5px;align-items:center;padding:6px 4px;border-radius:4px;cursor:pointer;color:#c8cdd8}.layer-row:hover,.layer-row.active{background:#343944}.eye{font-size:14px;color:#abb3c2}.layer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-layer{padding:0;border:0;background:transparent;color:#aeb4c1}.shortcut-panel p{margin:5px 0;color:#aeb4c1;font-size:11px}kbd{color:#f1f3f6;background:#15171c;border:1px solid #4b515d;border-radius:3px;padding:1px 4px;font-size:10px}#toast{position:fixed;bottom:36px;left:50%;translate:-50% 10px;opacity:0;background:#ebeff8;color:#1a1e27;border-radius:5px;padding:8px 12px;font-weight:600;pointer-events:none;transition:.18s}#toast.show{opacity:1;translate:-50% 0}.selected{filter:drop-shadow(0 0 0 #216cda)}.selection-box{fill:none;stroke:#216cda;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 3}.handle{fill:#fff;stroke:#216cda;stroke-width:1.5;vector-effect:non-scaling-stroke}.pen-preview{fill:none;stroke:#216cda;stroke-width:1.5;stroke-dasharray:4 4}.artboard-bg{pointer-events:all}