#canvas-viewport{position:absolute;top:var(--header-height);left:0;width:100%;height:calc(100% - var(--header-height));overflow:hidden;z-index:var(--z-canvas);cursor:default;touch-action:none}#canvas-content,#canvas-content *{user-select:none!important;-webkit-user-select:none!important}#canvas-content .chk-text:focus,#canvas-content .code-editor:focus,#canvas-content .note-title[contenteditable=true],#canvas-content .text-editor:focus{user-select:text!important;-webkit-user-select:text!important}#canvas-viewport.is-panning #canvas-content{pointer-events:none}#canvas-content{position:absolute;top:0;left:0;width:1000000px;height:1000000px;--page-bg:var(--bg-color);--page-grid-color:var(--grid-color);--page-grid-size:40px;background-color:var(--page-bg);background-image:linear-gradient(var(--page-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid-color) 1px,transparent 1px);background-size:var(--page-grid-size) var(--page-grid-size);transform-origin:0 0;contain:layout style}#canvas-content.lod-minimal{background-image:none!important}#connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity .2s ease}.connection-line{stroke:var(--text-secondary);pointer-events:none}#drawing-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}#hover-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10000;pointer-events:none}#interaction-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10000;display:none;cursor:crosshair;pointer-events:none}#interaction-layer[style*="display: block"],#interaction-layer[style*="display:block"]{pointer-events:all}body.drawing-active #canvas-content .note{user-select:none;-webkit-user-select:none;pointer-events:none}body.drawing-active #canvas-content .note .note-body,body.drawing-active #canvas-content .note .note-header{pointer-events:none}.drawn-line{pointer-events:auto;cursor:pointer;stroke-linecap:round;stroke-linejoin:round}.drawn-line.dynamic-ink{stroke:var(--ink-color)}.hover-path-preview{fill:none;stroke:var(--accent-color);stroke-opacity:0.9;pointer-events:none}.selected-line{filter:drop-shadow(0 0 var(--glow-radius, 4px) var(--accent-color)) drop-shadow(0 0 var(--glow-radius-inner, 1px) var(--accent-color))!important;will-change:filter}#selection-gizmo{position:absolute;pointer-events:none;cursor:move;display:none;border:1.5px solid var(--accent-color);z-index:10001;will-change:left,top,width,height,transform;contain:layout style}.gizmo-handle{position:absolute;width:30px;height:30px;background:#fff;border:3px solid var(--accent-color);border-radius:var(--radius-xs);pointer-events:auto;will-change:transform;backface-visibility:hidden;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:box-shadow .15s ease}.gizmo-handle:hover{box-shadow:0 2px 6px rgba(0,0,0,.3)}.handle-tl{top:-16px;left:-16px;cursor:nwse-resize}.handle-tr{top:-16px;right:-16px;cursor:nesw-resize}.handle-bl{bottom:-16px;left:-16px;cursor:nesw-resize}.handle-br{bottom:-16px;right:-16px;cursor:nwse-resize}.handle-rot{top:-50px;left:50%;transform:translateX(-50%);width:35px;height:35px;border-radius:50%;background:var(--accent-color);border:3px solid #fff;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.2)}#vertex-handle-layer{position:absolute;inset:0;z-index:10002;pointer-events:none}.vertex-handle{position:absolute;width:12px;height:12px;margin-left:-6px;margin-top:-6px;border-radius:50%;border:2px solid var(--accent-color);background:var(--surface-color);box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 2px rgba(var(--accent-rgb),.16);pointer-events:auto;cursor:grab;will-change:left,top}.vertex-handle:active{cursor:grabbing}#selection-box{position:absolute;border:1px dashed var(--accent-color);background:rgba(0,122,204,.1);display:none;pointer-events:none;z-index:10002;transform-origin:0 0;will-change:left,top,width,height;contain:strict}.selected-line{filter:drop-shadow(0 0 var(--glow-radius, 4px) var(--accent-color)) drop-shadow(0 0 var(--glow-radius-inner, 1px) var(--accent-color))!important;transition:filter .1s ease-out;will-change:filter}.selected-line.transforming{filter:drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)!important}.note.transforming{will-change:transform,width,height,left,top;backface-visibility:hidden;transform:translateZ(0);box-shadow:0 0 0 50px transparent!important;outline:1px solid transparent;outline:1px solid transparent;background-clip:padding-box;isolation:isolate;overflow:hidden!important}.note.transforming *{backface-visibility:hidden;pointer-events:none}#eraser-cursor{position:fixed;width:30px;height:30px;border:2px solid rgba(255,0,0,.5);background:rgba(255,0,0,.1);border-radius:50%;pointer-events:none;z-index:20000;transform:translate(-50%,-50%);display:none}#size-indicator-cursor{position:fixed;width:10px;height:10px;box-sizing:border-box;border:2px solid var(--accent-color);background:rgba(0,122,204,.2);border-radius:50%;pointer-events:none;z-index:20000;transform:translate(-50%,-50%);display:none;transition:width 50ms,height 50ms}.note{content-visibility:auto;contain-intrinsic-size:200px 300px}.note.has-custom-border{content-visibility:visible}.note.virtualized{visibility:hidden}.note.dragging{will-change:transform,left,top}.note.dragging .note-body{pointer-events:none}.lod-medium .note{box-shadow:none!important}.lod-medium .sticky-note.sticky-diamond .note-body,.lod-medium .sticky-note.sticky-heart .note-body,.lod-medium .sticky-note.sticky-hexagon .note-body,.lod-medium .sticky-note.sticky-speech-bubble .note-body{filter:none!important}.lod-medium .code-editor,.lod-medium .text-editor{font-size:.85em}.lod-medium .line-numbers{display:none}.lod-medium .chk-delete-btn{display:none}.lod-low .note{box-shadow:none!important;border-radius:0!important;border:1px solid var(--grid-color)}.lod-low .sticky-note.sticky-diamond .note-body,.lod-low .sticky-note.sticky-heart .note-body,.lod-low .sticky-note.sticky-hexagon .note-body,.lod-low .sticky-note.sticky-speech-bubble .note-body{filter:none!important}.lod-low .note-header{border-radius:0!important}.lod-low .code-editor,.lod-low .text-editor{font-size:.7em;line-height:1.2}.lod-low .line-numbers{display:none}.lod-low .chk-checkbox,.lod-low .chk-delete-btn{display:none}.lod-low .voice-waveform{display:none}.lod-low .note .note-body{pointer-events:none}.lod-low .drawn-line{shape-rendering:optimizeSpeed;pointer-events:none}.lod-low .note{pointer-events:auto}.lod-low .voice-note-container::before{content:'Voice Note';display:block;text-align:center;color:var(--text-secondary)}.lod-minimal .note-body{display:none}.lod-minimal .note{min-height:40px;background:var(--bg-secondary);border:1px solid var(--border-color)}.lod-minimal .note::after{content:'';position:absolute;inset:4px;background:var(--accent-color);border-radius:2px;opacity:.2}.lod-minimal .img-wrapper img{opacity:.3;filter:blur(2px)}.lod-minimal .img-wrapper img{opacity:.3;filter:blur(2px)}.low-detail-mode .drawn-line{shape-rendering:optimizeSpeed;stroke-linejoin:bevel}.low-detail-mode .drawn-line.dynamic-ink{filter:none!important}.note[data-type=image] img[data-loading=true]{opacity:.5}.note[data-type=image] img:not([data-loaded=true]){background:var(--grid-color);min-height:100px}#drop-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:var(--z-drop-overlay);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none}#drop-overlay.visible{display:flex;opacity:1}.drop-overlay-content{background:var(--header-bg);border:2px dashed var(--accent-color);padding:40px 60px;border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-xl);transform:scale(.9);transition:transform .3s cubic-bezier(.175, .885, .32, 1.275);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur)}#drop-overlay.visible .drop-overlay-content{transform:scale(1)}.drop-icon{width:64px;height:64px;color:var(--accent-color);margin-bottom:20px;animation:bounce 2s infinite ease-in-out}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.drop-overlay-content h2{margin:0;font-size:1.5rem;font-weight:700;color:var(--text-primary)}.drop-overlay-content p{margin:10px 0 0 0;color:var(--text-secondary);font-size:1rem}body.drag-active #app-header,body.drag-active #bottom-toolbar,body.drag-active #canvas-viewport,body.drag-active #floating-dock,body.drag-active #options-bar{filter:blur(4px);transition:filter .3s ease}.note.selected .pdf-interaction-overlay{cursor:default}