.sketch-canvas-scope{--ink:#17171b;--toolbar:#1b1a20;--toolbar-2:#232228;--paper:#f6f3ea;--paper-line:#e7e1d1;--dark-board:#17171b;--dark-line:#2d2c35;--accent:#4d6bff;--accent-soft:#4d6bff33;--text-lo:#c9c7d1;--text-hi:#f3f2f7;--danger:#ff6b6b;--radius:10px;box-sizing:border-box;color:var(--text-hi);width:100%;font-family:Inter,system-ui,-apple-system,sans-serif;position:relative;overflow:hidden}.sketch-canvas-scope *,.sketch-canvas-scope :before,.sketch-canvas-scope :after{box-sizing:border-box}.sketch-canvas-scope.sketch-app-container,.sketch-app-container.sketch-canvas-scope,.sketch-canvas-scope .sketch-app-container{background:var(--ink);flex-direction:column;width:100%;height:calc(100vh - 64px);min-height:560px;display:flex;position:relative;overflow:hidden}.sketch-canvas-scope.pip-mode .sketch-app-container,body.sketch-canvas-scope .sketch-app-container,body.pip-mode .sketch-app-container,.sketch-canvas-scope.pip-mode.sketch-app-container{width:100vw!important;height:100vh!important;min-height:100vh!important;max-height:100vh!important}.sketch-canvas-scope .sketch-toolbar{background:linear-gradient(180deg, var(--toolbar-2), var(--toolbar));-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;-webkit-user-select:none;user-select:none;z-index:40;border-bottom:1px solid #000;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:6px;max-width:100%;padding:8px 12px;display:flex;overflow:auto hidden}.sketch-canvas-scope .sketch-toolbar::-webkit-scrollbar{height:4px}.sketch-canvas-scope .sketch-toolbar::-webkit-scrollbar-track{background:0 0}.sketch-canvas-scope .sketch-toolbar::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.sketch-canvas-scope .grp{background:#00000047;border-radius:12px;flex-shrink:0;align-items:center;gap:4px;padding:4px;display:flex}.sketch-canvas-scope .grp+.grp{margin-left:2px}.sketch-canvas-scope .divider{background:#ffffff17;align-self:stretch;width:1px;margin:2px 4px}.sketch-canvas-scope button.tool-btn{width:36px;height:36px;color:var(--text-lo);cursor:pointer;background:0 0;border:none;border-radius:9px;justify-content:center;align-items:center;font-size:15px;font-weight:600;line-height:1;transition:background .12s,color .12s,transform 80ms;display:flex}.sketch-canvas-scope button.tool-btn svg{flex-shrink:0;display:block}.sketch-canvas-scope button.tool-btn:hover{color:var(--text-hi);background:#ffffff14}.sketch-canvas-scope button.tool-btn:active{transform:scale(.92)}.sketch-canvas-scope button.tool-btn.active{background:var(--accent);color:#fff}.sketch-canvas-scope button.tool-btn[disabled]{opacity:.35;cursor:not-allowed}.sketch-canvas-scope .quick-swatches{align-items:center;gap:3px;padding:0 4px;display:flex}.sketch-canvas-scope .quick-swatch-dot{cursor:pointer;border:1.5px solid #ffffff40;border-radius:50%;width:16px;height:16px;padding:0;transition:transform .1s,border-color .12s}.sketch-canvas-scope .quick-swatch-dot:hover{border-color:#ffffffb3;transform:scale(1.2)}.sketch-canvas-scope .quick-swatch-dot.active{box-shadow:0 0 0 2px var(--accent);border-color:#fff;transform:scale(1.15)}.sketch-canvas-scope .right-grp{align-items:center;gap:8px;margin-left:auto;display:flex}.sketch-canvas-scope #infoBtn,.sketch-canvas-scope .info-btn{width:26px;height:26px;color:var(--text-lo);cursor:pointer;background:0 0;border:1.5px solid #fff3;border-radius:50%;justify-content:center;align-items:center;font-family:Georgia,serif;font-size:13px;font-weight:700;transition:background .12s,color .12s,border-color .12s;display:flex}.sketch-canvas-scope #infoBtn:hover,.sketch-canvas-scope .info-btn:hover{color:var(--text-hi);background:#ffffff14;border-color:#ffffff59}.sketch-canvas-scope .swatch{cursor:pointer;appearance:none;background:0 0;border:2px solid #ffffff40;border-radius:7px;width:28px;height:28px;padding:0}.sketch-canvas-scope input[type=color]{appearance:none}.sketch-canvas-scope input[type=color]::-webkit-color-swatch-wrapper{padding:0}.sketch-canvas-scope input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}.sketch-canvas-scope input[type=range]{width:70px;accent-color:var(--accent);cursor:pointer}.sketch-canvas-scope .lbl{color:var(--text-lo);white-space:nowrap;padding:0 4px;font-size:11px}.sketch-canvas-scope select,.sketch-canvas-scope .numinput{color:var(--text-hi);cursor:pointer;background:#00000047;border:1px solid #ffffff24;border-radius:8px;outline:none;padding:5px 8px;font-family:inherit;font-size:12px}.sketch-canvas-scope select option{color:#f3f2f7;background:#1c1b22}.sketch-canvas-scope .numinput{cursor:text;width:50px}.sketch-canvas-scope .pen-wrap{position:relative}.sketch-canvas-scope .pen-flyout{z-index:200;background:#141318;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;gap:10px;width:195px;padding:12px;display:flex;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 18px 40px #000000b3}.sketch-canvas-scope .fly-color-row{justify-content:center;padding:2px 0;display:flex}.sketch-canvas-scope .fly-color-circle{cursor:pointer;border:3px solid #fff3;border-radius:50%;width:42px;height:42px;padding:0;transition:transform .1s,border-color .12s}.sketch-canvas-scope .fly-color-circle:hover{border-color:#fff6;transform:scale(1.05)}.sketch-canvas-scope .fly-divider{background:#ffffff14;height:1px;margin:0 2px}.sketch-canvas-scope .fly-size-row{align-items:center;gap:8px;display:flex}.sketch-canvas-scope .fly-size-row input[type=range]{flex:1}.sketch-canvas-scope .fly-size-row .mini-lbl{color:var(--text-lo);font-size:11px}.sketch-canvas-scope .pen-style-list{flex-direction:column;gap:2px;display:flex}.sketch-canvas-scope .pen-style{color:var(--text-lo);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:8px;font-family:inherit;font-size:13px;transition:background .12s,color .12s;display:flex}.sketch-canvas-scope .pen-style .ic{background:#ffffff0f;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.sketch-canvas-scope .pen-style .ic svg{display:block}.sketch-canvas-scope .pen-style:hover{color:var(--text-hi);background:#ffffff0f}.sketch-canvas-scope .pen-style.active{background:var(--accent-soft);color:var(--text-hi);font-weight:600}.sketch-canvas-scope .pen-style.active .ic{background:var(--accent);color:#fff}.sketch-canvas-scope #pipBtn,.sketch-canvas-scope .pip-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:10px;align-items:center;gap:6px;padding:7px 13px;font-size:13px;font-weight:600;transition:filter .12s,transform 80ms;display:flex}.sketch-canvas-scope #pipBtn:hover,.sketch-canvas-scope .pip-btn:hover{filter:brightness(1.08)}.sketch-canvas-scope #pipBtn:active,.sketch-canvas-scope .pip-btn:active{transform:scale(.97)}.sketch-canvas-scope .board-scroll{-webkit-user-select:none;user-select:none;touch-action:none;flex:1;width:100%;height:100%;min-height:0;position:relative;overflow:hidden!important}.sketch-canvas-scope .board-scroll.theme-paper{background-color:var(--paper);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-paper.grid-dots{background-image:radial-gradient(circle at 1px 1px, var(--paper-line) 1.2px, transparent 1.4px);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-paper.grid-grid{background-image:linear-gradient(to right, var(--paper-line) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-line) 1px, transparent 1px);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-paper.grid-lines{background-image:linear-gradient(to bottom, var(--paper-line) 1px, transparent 1px);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-paper.grid-plain{background-image:none}.sketch-canvas-scope .board-scroll.theme-dark{background-color:var(--dark-board);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-dark.grid-dots{background-image:radial-gradient(circle at 1px 1px, var(--dark-line) 1.2px, transparent 1.4px);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-dark.grid-grid{background-image:linear-gradient(to right, var(--dark-line) 1px, transparent 1px), linear-gradient(to bottom, var(--dark-line) 1px, transparent 1px);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-dark.grid-lines{background-image:linear-gradient(to bottom, var(--dark-line) 1px, transparent 1px);background-size:24px 24px}.sketch-canvas-scope .board-scroll.theme-dark.grid-plain{background-image:none}.sketch-canvas-scope .board-canvas-wrapper{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.sketch-canvas-scope .board-scroll.tool-text,.sketch-canvas-scope .board-canvas-wrapper.tool-text{cursor:text}.sketch-canvas-scope .board-scroll.tool-pen,.sketch-canvas-scope .board-canvas-wrapper.tool-pen{cursor:crosshair}.sketch-canvas-scope .board-scroll.tool-eraser,.sketch-canvas-scope .board-canvas-wrapper.tool-eraser,.sketch-canvas-scope .board-scroll.tool-sticky,.sketch-canvas-scope .board-canvas-wrapper.tool-sticky{cursor:cell}.sketch-canvas-scope .board-scroll.tool-rect,.sketch-canvas-scope .board-scroll.tool-ellipse,.sketch-canvas-scope .board-scroll.tool-arrow,.sketch-canvas-scope .board-scroll.tool-line,.sketch-canvas-scope .board-canvas-wrapper.tool-rect,.sketch-canvas-scope .board-canvas-wrapper.tool-ellipse,.sketch-canvas-scope .board-canvas-wrapper.tool-arrow,.sketch-canvas-scope .board-canvas-wrapper.tool-line{cursor:crosshair}.sketch-canvas-scope .board-scroll.tool-select,.sketch-canvas-scope .board-canvas-wrapper.tool-select{cursor:default}.sketch-canvas-scope .board-scroll.tool-hand,.sketch-canvas-scope .board-scroll.is-panning,.sketch-canvas-scope .board-canvas-wrapper.tool-hand,.sketch-canvas-scope .board-canvas-wrapper.is-panning{cursor:grab!important}.sketch-canvas-scope .board-scroll.is-panning:active,.sketch-canvas-scope .board-canvas-wrapper.is-panning:active{cursor:grabbing!important}.sketch-canvas-scope .draw-canvas{touch-action:none;position:absolute;inset:0}.sketch-canvas-scope .obj-layer{pointer-events:none;position:absolute;inset:0}.sketch-canvas-scope .obj-layer .obj{pointer-events:auto}.sketch-canvas-scope .obj{box-sizing:border-box;border:1.5px solid #0000;border-radius:4px;position:absolute}.sketch-canvas-scope .obj.selected{box-shadow:none;border:1.5px dashed #ffffffd9}.sketch-canvas-scope .board-scroll.theme-paper .obj.selected{border:1.5px dashed #17171bbf}.sketch-canvas-scope .obj-content{transform-origin:50%;box-sizing:border-box;position:absolute}.sketch-canvas-scope .obj.is-transforming .handle,.sketch-canvas-scope .obj.is-transforming .del-btn,.sketch-canvas-scope .obj.is-transforming .rotate-wrapper{opacity:0!important;pointer-events:none!important;display:none!important}.sketch-canvas-scope .obj.is-transforming{box-shadow:none!important;border-color:#0000!important;outline:none!important}.sketch-canvas-scope .obj img,.sketch-canvas-scope .obj video{pointer-events:none;object-fit:contain;border-radius:3px;width:100%;height:100%;display:block}.sketch-canvas-scope .handle{z-index:20;box-sizing:border-box;background:#fff;border:1px solid #17171b;border-radius:1.5px;width:8px;height:8px;display:none;position:absolute;box-shadow:0 1px 4px #00000059}.sketch-canvas-scope .handle-tl{cursor:nwse-resize;top:-5px;left:-5px}.sketch-canvas-scope .handle-tr{cursor:nesw-resize;top:-5px;right:-5px}.sketch-canvas-scope .handle-bl{cursor:nesw-resize;bottom:-5px;left:-5px}.sketch-canvas-scope .handle-br{cursor:nwse-resize;bottom:-5px;right:-5px}.sketch-canvas-scope .handle-tc{cursor:ns-resize;top:-5px;left:calc(50% - 4px)}.sketch-canvas-scope .handle-bc{cursor:ns-resize;bottom:-5px;left:calc(50% - 4px)}.sketch-canvas-scope .handle-lc{cursor:ew-resize;top:calc(50% - 4px);left:-5px}.sketch-canvas-scope .handle-rc{cursor:ew-resize;top:calc(50% - 4px);right:-5px}.sketch-canvas-scope .obj.selected:not(.is-transforming) .handle{display:block}.sketch-canvas-scope .rotate-wrapper{z-index:22;pointer-events:none;flex-direction:column;align-items:center;display:none;position:absolute;top:-24px;left:50%;transform:translate(-50%)}.sketch-canvas-scope .rotate-stem{border-left:1.5px dashed #ffffffd9;width:1px;height:14px}.sketch-canvas-scope .board-scroll.theme-paper .rotate-stem{border-left:1.5px dashed #17171bbf}.sketch-canvas-scope .rotate-handle{color:#17171b;cursor:grab;pointer-events:auto;background:#fff;border:1px solid #17171b;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;transition:transform .1s,background .12s;display:flex;box-shadow:0 2px 8px #0000004d}.sketch-canvas-scope .rotate-handle:hover{background:#f0f0f5;transform:scale(1.12)}.sketch-canvas-scope .rotate-handle:active{cursor:grabbing}.sketch-canvas-scope .obj.selected:not(.is-transforming) .rotate-wrapper{display:flex}.sketch-canvas-scope .del-btn{color:#ff6b6b;cursor:pointer;z-index:25;background:#1e1d24;border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:center;width:26px;height:26px;transition:background .12s,color .12s,transform 80ms,border-color .12s;display:none;position:absolute;top:-36px;right:-10px;box-shadow:0 4px 14px #00000073}.sketch-canvas-scope .board-scroll.theme-paper .del-btn{color:#ef4444;background:#fff;border-color:#0000002e;box-shadow:0 4px 12px #00000024}.sketch-canvas-scope .del-btn:hover{transform:scale(1.1);color:#fff!important;background:#ef4444!important;border-color:#ef4444!important}.sketch-canvas-scope .obj.selected:not(.is-transforming) .del-btn{display:flex}.sketch-canvas-scope .text-obj .obj-content{min-width:24px}.sketch-canvas-scope .text-content{cursor:text;white-space:pre-wrap;word-break:break-word;outline:none;width:100%;min-width:20px;height:100%;min-height:1.4em;padding:4px 6px;line-height:1.25}.sketch-canvas-scope .text-obj.selected .text-content{cursor:move}.sketch-canvas-scope .text-content:empty:before{content:attr(data-placeholder);color:#00000059}.sketch-canvas-scope .sticky-obj .obj-content{cursor:move;border-radius:10px;flex-direction:column;width:100%;min-width:120px;height:100%;min-height:100px;display:flex;overflow:hidden;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014}.sketch-canvas-scope .sticky-header{-webkit-user-select:none;user-select:none;background:#0000000a;border-bottom:1px solid #0000000f;align-items:center;gap:6px;height:24px;padding:0 8px;display:flex}.sketch-canvas-scope .sticky-color-dot{cursor:pointer;border:1px solid #0003;border-radius:50%;width:12px;height:12px;padding:0;transition:transform .1s}.sketch-canvas-scope .sticky-color-dot:hover{transform:scale(1.25)}.sketch-canvas-scope .sticky-color-dot.active{transform:scale(1.15);box-shadow:0 0 0 2px #17171b}.sketch-canvas-scope .sticky-text{cursor:text;white-space:pre-wrap;word-break:break-word;outline:none;flex:1;padding:10px 12px;font-family:Caveat,cursive,sans-serif;font-size:20px;line-height:1.35}.sketch-canvas-scope .sticky-text:empty:before{content:attr(data-placeholder);opacity:.45}.sketch-canvas-scope .image-obj,.sketch-canvas-scope .video-obj,.sketch-canvas-scope .shape-obj{cursor:move}.sketch-canvas-scope .drop-hint{border:3px dashed var(--accent);pointer-events:none;color:var(--accent);z-index:50;background:#4d6bff14;justify-content:center;align-items:center;font-size:20px;font-weight:600;display:none;position:absolute;inset:0}.sketch-canvas-scope .drop-hint.show{display:flex}.sketch-canvas-scope .board-hint{color:#00000080;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:20;background:#f6f3eae0;border:1px solid #0000000f;border-radius:6px;padding:4px 10px;font-size:11px;position:absolute;bottom:12px;left:14px}.sketch-canvas-scope .board-scroll.theme-dark .board-hint{color:#ffffff8c;background:#17171be0;border-color:#ffffff1a}.sketch-canvas-scope .zoom-hud-bar{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#141319e0;border:1px solid #ffffff26;border-radius:10px;align-items:center;gap:2px;padding:3px;display:flex;position:absolute;bottom:12px;right:14px;box-shadow:0 4px 16px #0006}.sketch-canvas-scope .zoom-hud-btn{color:var(--text-lo);cursor:pointer;background:0 0;border:none;border-radius:7px;justify-content:center;align-items:center;min-width:26px;height:26px;padding:0 4px;font-size:14px;font-weight:700;transition:background .12s,color .12s;display:flex}.sketch-canvas-scope .zoom-hud-btn:hover{color:var(--text-hi);background:#ffffff1a}.sketch-canvas-scope .zoom-hud-val{padding:0 6px;font-size:11px;font-weight:600}.sketch-canvas-scope .zoom-hud-sep{background:#ffffff26;width:1px;height:14px;margin:0 2px}.sketch-canvas-scope .zoom-hud-fit{color:var(--accent);padding:0 8px;font-size:11px;font-weight:600}.sketch-canvas-scope .zoom-indicator{color:#17171b;pointer-events:none;opacity:0;-webkit-user-select:none;user-select:none;z-index:30;background:#f6f3eae6;border:1px solid #00000026;border-radius:7px;padding:4px 10px;font-size:11px;font-weight:600;transition:opacity .15s ease-in-out;position:absolute;bottom:50px;right:14px}.sketch-canvas-scope .board-scroll.theme-dark .zoom-indicator{color:var(--text-hi);background:#18171de6;border-color:#ffffff26}.sketch-canvas-scope .zoom-indicator.show{opacity:1}.sketch-canvas-scope .sketch-toast-banner{color:#f3f2f7;z-index:200;pointer-events:none;background:#18171d;border:1px solid #fff3;border-radius:12px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;animation:.2s cubic-bezier(.16,1,.3,1) sketchToastSlide;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 12px 36px #000000b3}.sketch-canvas-scope .sketch-toast-banner svg{color:#10b981}@keyframes sketchToastSlide{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.sketch-canvas-scope .shortcuts-modal-backdrop{z-index:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sketch-canvas-scope .modal-card{background:#18171d;border:1px solid #ffffff1f;border-radius:16px;width:420px;max-width:90vw;max-height:80vh;padding:22px 24px;overflow-y:auto;box-shadow:0 24px 60px #000000b3}.sketch-canvas-scope .modal-card h2{color:var(--text-hi);justify-content:space-between;align-items:center;margin:0 0 16px;font-size:16px;font-weight:700;display:flex}.sketch-canvas-scope .modal-close{color:var(--text-lo);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 6px;font-size:18px;line-height:1;transition:background .12s}.sketch-canvas-scope .modal-close:hover{color:var(--text-hi);background:#ffffff1a}.sketch-canvas-scope .shortcut-row{color:var(--text-lo);border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:8px 2px;font-size:13px;display:flex}.sketch-canvas-scope .shortcut-row:last-child{border-bottom:none}.sketch-canvas-scope .shortcut-row .keys{gap:4px;display:flex}.sketch-canvas-scope .shortcut-row .key{min-width:22px;height:22px;color:var(--text-hi);background:#00000059;border:1px solid #ffffff2e;border-radius:6px;justify-content:center;align-items:center;padding:0 6px;font-family:inherit;font-size:12px;font-weight:600;display:flex}@media (max-width:1024px){.sketch-canvas-scope .sketch-toolbar{gap:5px;padding:6px 10px}.sketch-canvas-scope button.tool-btn{width:32px;height:32px}.sketch-canvas-scope input[type=range]{width:55px}.sketch-canvas-scope .board-hint{display:none}}@media (max-width:768px){.sketch-canvas-scope .sketch-toolbar{gap:4px;padding:4px 6px}.sketch-canvas-scope .grp{border-radius:9px;padding:2px 4px}.sketch-canvas-scope button.tool-btn{border-radius:7px;width:30px;height:30px}.sketch-canvas-scope .lbl{display:none}.sketch-canvas-scope select{max-width:80px;padding:3px 5px;font-size:11px}.sketch-canvas-scope .quick-swatches{gap:2px;padding:0 2px}.sketch-canvas-scope .quick-swatch-dot{width:14px;height:14px}.sketch-canvas-scope .pip-btn{display:none}.sketch-canvas-scope .zoom-hud-bar{bottom:12px;right:12px}}