:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,Segoe UI,Roboto,sans-serif}html,body{height:100%;margin:0;overflow:hidden}#root{width:100vw;height:100vh}*{box-sizing:border-box}.app{background:#f0f1f4;width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-container{position:absolute;inset:0}.drawing-canvas{touch-action:none;-webkit-user-select:none;user-select:none;display:block}.canvas-tooltip{z-index:15;color:#fff;pointer-events:none;white-space:nowrap;background:#1f1f24;border-radius:6px;padding:3px 8px;font-family:ui-monospace,Consolas,monospace;font-size:13px;position:fixed;box-shadow:0 2px 8px #00000040}.toolbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#fffffff2;border-radius:16px;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:8px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000002e,0 1px 3px #00000014}.toolbar-btn{color:#33343a;cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;transition:background .15s,color .15s;display:flex}.toolbar-btn:hover:not(:disabled){background:#d7d9e0}.toolbar-btn.active{color:#fff;background:#1a73e8}.toolbar-btn.active:hover:not(:disabled){background:#1765c7}.toolbar-btn:disabled{color:#c3c4cb;cursor:not-allowed}.toolbar-divider{background:#e1e2e7;width:1px;height:28px;margin:0 4px}.toolbar-color-swatch{cursor:pointer;border:2px solid #fff;border-radius:8px;flex-shrink:0;width:30px;height:30px;transition:transform .12s;box-shadow:0 1px 4px #00000026}.toolbar-color-swatch:hover{transform:scale(1.12)}.color-popover,.bg-color-popover{z-index:20;background:#fff;border-radius:14px;max-width:min(260px,100vw - 32px);padding:12px;position:fixed;box-shadow:0 8px 24px #0003,0 1px 3px #00000014}.toolbar-color-popover{transform:translate(-50%)}.colour-picker-top{align-items:center;gap:10px;margin-bottom:10px;display:flex}.colour-picker-swatch{cursor:pointer;background:0 0;border:none;border-radius:8px;flex-shrink:0;width:40px;height:40px;padding:0}.colour-picker-hex-input{color:#26272c;background:#f7f8fa;border:1px solid #d7d8dd;border-radius:8px;outline:none;flex:1;min-width:0;height:36px;padding:0 10px;font-family:ui-monospace,Consolas,monospace;font-size:15px}.colour-picker-hex-input:focus{background:#fff;border-color:#1a73e8}.colour-picker-rows{flex-direction:column;gap:6px;display:flex}.colour-picker-row{cursor:pointer;color:#26272c;background:#fbfbfd;border:1px solid #e8e9ee;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:6px 10px;font-family:ui-monospace,Consolas,monospace;font-size:13px;transition:background .12s;display:flex}.colour-picker-row:hover{background:#eef0f6}.colour-picker-row-value{-webkit-user-select:all;user-select:all}.colour-picker-row-action{color:#6b7280;flex-shrink:0;margin-left:12px;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:12px}.bg-color-picker{z-index:10;position:absolute;top:16px;right:16px}.bg-color-swatch{cursor:pointer;border:2px solid #fff;border-radius:12px;width:40px;height:40px;transition:transform .12s;box-shadow:0 4px 12px #00000026,0 1px 3px #0000001a}.bg-color-swatch:hover{transform:scale(1.08)}.bg-color-popover{position:absolute;top:48px;right:0}.palette-panel{z-index:20;background:#fff;border-radius:16px;flex-direction:column;width:min(340px,90vw);max-height:80vh;display:flex;position:fixed;overflow:hidden;box-shadow:0 16px 48px #00000038,0 1px 3px #00000014}.palette-header{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-bottom:1px solid #e8e9ee;justify-content:space-between;align-items:center;padding:14px 16px 10px;display:flex}.palette-header.dragging{cursor:grabbing}.palette-title{color:#1f1f24;margin:0;font-size:17px;font-weight:600}.palette-close{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:background .12s;display:flex}.palette-close:hover{background:#f2f3f7}.palette-toolbar{padding:10px 12px 0}.palette-randomize-btn{color:#1a73e8;cursor:pointer;background:#eaf1fd;border:1px solid #cfe0fb;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:9px 12px;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:600;transition:background .12s,border-color .12s;display:flex}.palette-randomize-btn:hover{background:#d9e8fc;border-color:#b7d3f9}.palette-randomize-btn:active{background:#c9defa}.palette-list{flex-direction:column;gap:4px;padding:8px;display:flex;overflow-y:auto}.palette-empty{text-align:center;color:#9ca3af;margin:0;padding:32px 20px;font-size:14px}.palette-row{background:#fbfbfd;border:1px solid #0000;border-radius:10px;align-items:center;gap:0;width:100%;transition:background .12s,border-color .12s;display:flex;overflow:hidden}.palette-row:hover{background:#eef0f6;border-color:#d7d8dd}.palette-row-select{cursor:pointer;color:#26272c;background:0 0;border:none;flex:1;align-items:center;gap:12px;min-width:0;padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:13px;display:flex}.palette-row-swatch{border:1px solid #0000001a;border-radius:6px;flex-shrink:0;width:24px;height:24px}.palette-row-hex{text-align:left;flex-shrink:0}.palette-row-rgba{color:#6b7280;text-align:left;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:12px;overflow:hidden}.palette-row-actions{flex-shrink:0;gap:4px;padding:0 10px 0 0;display:flex}.palette-row-copy-btn{color:#6b7280;cursor:pointer;background:#f7f8fa;border:1px solid #d7d8dd;border-radius:6px;padding:4px 10px;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:11px;transition:background .12s}.palette-row-copy-btn:hover{background:#e1e2ea}.hotkeys-backdrop{z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.hotkeys-modal{background:#fff;border-radius:16px;flex-direction:column;width:min(440px,92vw);max-height:80vh;display:flex;overflow:hidden;box-shadow:0 16px 48px #00000040}.hotkeys-header{border-bottom:1px solid #e8e9ee;justify-content:space-between;align-items:center;padding:16px 20px 12px;display:flex}.hotkeys-title{color:#1f1f24;margin:0;font-size:17px;font-weight:600}.hotkeys-close{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:background .12s;display:flex}.hotkeys-close:hover{background:#f2f3f7}.hotkeys-body{flex-direction:column;gap:16px;padding:16px 20px;display:flex;overflow-y:auto}.hotkeys-group{flex-direction:column;gap:6px;display:flex}.hotkeys-section{color:#9ca3af;text-transform:uppercase;letter-spacing:.6px;margin:0;font-size:13px;font-weight:600}.hotkeys-row{background:#fbfbfd;border-radius:8px;justify-content:space-between;align-items:center;padding:6px 10px;display:flex}.hotkeys-key{color:#1a73e8;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:13px}.hotkeys-action{color:#33343a;text-align:right;font-size:13px}@media (width<=520px){.toolbar{border-radius:14px;gap:5px;padding:6px}.toolbar-btn{border-radius:8px;width:36px;height:36px;font-size:17px}.toolbar-divider{height:22px;margin:0 3px}.toolbar-color-swatch{border-radius:6px;width:24px;height:24px}}@media (width<=400px){.toolbar{border-radius:12px;gap:4px;padding:5px}.toolbar-btn{border-radius:7px;width:32px;height:32px;font-size:15px}.toolbar-divider{height:18px;margin:0 2px}.toolbar-color-swatch{border-radius:5px;width:20px;height:20px}}